Скролл на телефоне css

Скролл на телефоне css

С помощью стандартной прокрутки и пары улучшений.

Для начала сверстаем горизонтальное меню:

/* style.css */ .menu < display: flex; font: 24px/32px Bureausans, Arial, sans-serif; >.menu-item < margin-right: 12px; >.menu-item:last-child

Теперь поместим меню в блок с ограниченной шириной и горизонтальной прокруткой:

При прокрутке появляется горизонтальный скроллбар. В коротком меню он нам ни к чему, спрячем его:

/* style.css */ .menuLimiter < /* . */ /* Добавим дополнительный нижнее поле элементу, в котором прокручивается меню */ padding-bottom: 20px; /* С помощью отрицательного отступа компенсируем «нарощенное» поле */ margin-bottom: -20px; >.menuWrapper < /* Спрячем всё, что выходит за границы родителя */ overflow: hidden; >

Добавим немного косметики в виде «забеления» по краям с помощью маски:

Осталась одна проблема. При некоторых ширинах экрана меню обрезается так, что кажется, что всё поместилось и прокручивать нечего:

Чтобы поправить это, можно написать небольшой скрипт, который будет анализировать ширину элементов и расставлять их так, чтобы один из элементов всегда обрезался. Но так как наше меню довольно статичное, просто опишем подходящие отступы для разной ширины экрана:

/* style.css */ @media only screen and (max-width: 400px) < .menu-item < margin-right: 18px; >> @media only screen and (max-width: 426px) < .menu-item < margin-right: 8px; >> @media only screen and (max-width: 450px) < .menu-item < margin-right: 9px; >> @media only screen and (max-width: 470px) < .menu-item < margin-right: 18px; >> @media only screen and (max-width: 510px) < .menu-item < margin-right: 18px; >>

Источник

Убираем горизонтальный скролл в мобильной версии сайта

Admin 05.05.2017 , обновлено: 13.09.2017 CSS, WordPress

Как убрать прокрутку по горизонтали в мобильной версии сайта. Как настроить css стили, чтобы скроллинг влево и вправо при просмотре через телефон не работал. Это же касается отключения горизонтальной прокрутки на iPhone.

Для выполнения этих задач нужно в стилях CSS своего сайта прописать следующее:

Чтобы убрать горизонтальный скролл одного HTML тега html или body не всегда достаточно, чтобы прокрутка исчезла. Обязательно нужно добавить overflow-x: hidden; к обоим тегам.

Если это не помогает, значит нужно искать ошибки в дизайне сайта. Какой-то элемент в дизайне сайта выходит за края и тем самым стиль overflow-x: hidden; перестаёт работать.

У меня так случилось с плагином Antispam Bee на сайте WordPress. Версия плагина 2.7.0 работала отлично, а как вышла версия 2.7.1, то плагин внёс в дизайн сайта какой-то лишний элемент.

Я долго искал причину ошибки, прежде чем понял, что причина вызвана плагином. Сначала пришлось потратить несколько часов и перелопатить весь css код на своём сайте. И только когда ничего не помогло, пришла догадка, что возможна причина в некорректном вмешательстве плагинов в работу сайта.

Как оказалось плагин Antispam Bee вносил что-то своё в дизайн формы комментариев. При этом видимого изменения не было.

А внутри HTML кода он вносил изменения и эту форму:

В результате какой-то невидимый элемент выходил за границу экрана. Элемент не отображался и потому понять, что именно стало причиной неисправности было затруднительно. И настольная версия браузера и мобильная никаких лишних элементов не показывала.

Я так и не нашёл как победить эту ошибку, не изменяя свои стили. Пришлось внести коррективы у себя в CSS. Вместо указанного стиля у себя на сайте:

Я уменьшил поле комментариев со 100% до 97%.

После этого возможность горизонтального скролинга исчезла.

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Комментарии к статье “ Убираем горизонтальный скролл в мобильной версии сайта ” (10)

У меня сайт без плагина, делал адаптивную верстку давно. А сейчас стал замечать, есть горизонтальная прокрутка в одну сторону с права на лево. Не знаю что и делать, только догадываюсь, что где-то править надо. А где? Сайт mycompplus.ru

На разрешении в 768 у вас примешивается стиль pill_m, в котором задано width: 768px !important;. Этот участок нужно переписать.

Юрий, спасибо за обратную связь. Можешь посмотреть у меня? Я плохо еще шарю. У меня проблема в кнопке scroll-on-top была. Я установил плагин до темы и он видимо взял произвольную ширину. Удалил кнопку, почистил кэш и все равно не помогает. Видимо этот плагин внес изменения в код, как пишет автор, но я не совсем понимаю как по аналогии решить проблему(что и куда прописать и исправить). Если не трудно, оставь контакт для связи. Вот больной engineeringdoc.ru

Посмотрел сайт, ответ дан в первом абзаце этой статьи. Только не говорите, что вы пробовали 🙂 Вам надо поставить overflow-x: hidden;.

Спасибо за обратную связь. В какой файл это добавить, если я собрал на конструкторе и движок wp. Я так понимаю что это файл с css, но где он находится(в какой папке) и как называется не понимаю. Подскажите для «особо умных в этом деле» P. S. Очень хочу исправить сам, но как слепой котенок уперся в угол.

Все сработало! Я вставил команду через внешний вид-> настроить->дополнительные стили, для тех у кого wordpress. Всем спасибо!

Добрый день! Подскажите, что нужно сделать у меня, чтобы убрать горизонтальный скролл. Сайт: sst-26.ru

Добавить комментарий Отменить ответ

Если возникнут вопросы пишите на электронную почту.

Источник

Как включить скроллинг в диве на мобильном устройстве?

Всем добрый.
Как реализовать скроллинг в диве с overflow: scroll на устройстве с тач интерфейсом?
jsfiddle.net/H7EAu/9/ — в этом примере он не срабатывает, как и в проекте, которым я сейчас занят.
(Устройство — Kindle Fire)

Гм, спасибо. Но в опере то же самое. Скроллбары видны (что странно), но скроллить нельзя. В FF всё ок. Стоит ли волноваться за мобильный Safari? Движки-то у него и у киндловского браузера одинаковы.

Это зависит от браузера, к примеру в Opera Mobile есть, а в Firefox для андроида нету.

Лучше всего сделать кастомный, если нужен скролл, есть много библиотек готовых. Но честно говоря, скролл не лучшее решение для тач интерфейсов.

Нет, мне не нужен скролл, мне нужно, чтоб контент «перематывался» в зависимости от скорости передвижения пальца при прикосновении. Можно, конечно, сделать и программно, но решение будет явно сложнее и тяжелее.

Спасибо, учту. Жаль, только, контент не двигается по инерции, когда отпускаешь палец. Придется дописывать.

Недавно реализовывал скроллинг на iOS Safari. Там надо подписываться на три метода: onTouchStart (определяем, какой див скроллить), onTouchMove(скроллим в зависимости от координат пальца), onTouchEnd (перестаем скроллить).

на jQuery есть библиотечка в 150 строчек кода: baijs.nl/tinyscrollbar/
На iOS, к сожалению, в ней скролится только ползунками. Я ее допилил до ума так, чтоб HTML не гавнить и чтоб работал скролл на iOS одним пальцем. Если надо, могу скинуть.

Да, давайте. В любом случае, будет выбор. А там, может, напишу своё решение (раньше с тач интерфейсами не сталкивался).

Источник

Как сделать горизонтальную прокрутку как на мобильном устройстве?

Добрый вечер!
На телефоне если что то не влезло в блок wrapper можно прокрутить горизонтально перетащив пальцем.

На компьютере я скрываю полосу прокрутки снизу, как мне сделать чтоб можно было прокручивать горизонтально мышью, как пальцем на телефоне?

Простой 6 комментариев

Вадим,
На телефоне можно прокрутить перетащив пальцем, а если на компьютере скрыть полосу прокрутки, то как прокрутить мышкой

Вадим,
Я наверно не точно выразил свой вопрос
Если у блока wrapper появляется полоса прокрутки то я могу прокручивать этот блок двигая ползунок вправо или влево.

А как сделать чтоб блок прокручивался если я кликаю на item и виду мышь в право или в лево, то-есть такой же принцип как если бы я двигал ползунком

Ismail-1, ну вот это уже другое дело 🙂
Вам ниже уже все по делу рассказали. Такое поведение не ожидается на десктопе и нужно пользователю либо подсказать об этом — поменять курсор на тип move, а так же сделать так, чтоб сбоку контент был чуть чуть спрятан за границей, тем самым вызывая у пользователя желание его посмотреть, после чего он наведёт туда мышкой, увидеть другой курсор и станет понятно.
Либо не делать так на десктопе) либо сделать стрелочку которая будет прокручивать по нажатию на определённое количество или типа того

Можешь отслеживать зажатие мыши над элементом. После чего читать движение влево вправо и на это же расстояние двигать скролл

document.getElementById('block').mousemove = function(e) < if (e.which == 1) <>// Нажата левая кнопка мыши if (e.which == 2) <> // Нажато колёсико мыши if (e.which == 3) <> // Нажата правая кнопка мыши >

В целом можешь между срабатываниями считать разницу в координатах и менять значение у елемента element.scrollLeft

Я бы так сделал, но не знаю на сколько это нужно, скорее всего пользователь просто не поймет, что там нужно скролить, если ему это никак не обозначить + рушится опыт пользователя т.к я не видел, что бы где то на десктопе делали скролл вбок при помощи мыши (не считая слайдеров)

Источник