Как отключить scroll css
Перейти к содержимому

Как отключить scroll css

  • автор:

Как отключить скроллинг страницы?

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

  • Вопрос задан более трёх лет назад
  • 7033 просмотра

Комментировать

Решения вопроса 3

wapster92

WapSter @wapster92 Куратор тега JavaScript

Как вариант

window.addEventListener('scroll', e => < window.scrollTo() >)

UPD В хроме все норм, но в других браузерах дерганье. Так что надежнее при помощи css, но скролл бар пропадет

Ответ написан более трёх лет назад

Комментировать

Нравится 1 Комментировать

Прокрутка внутри всплывающих блоков в Safari на iOS

Frontend-разработчики, которые делают мобильные версии сайтов и веб-сервисов неминуемо сталкиваются с таким чудесным браузером как Safari на iOS. Воистину, этот браузер имеет свое уникальное мнение о многих вещах, касающихся отображения и поведения верстки.

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

Увы, если положить блок, например, с помощью position: fixed поверх страницы, задать ему размеры и указать overflow: auto , то iOS Safari при его прокрутке устроит вам настоящий парад багов (https://vimeo.com/239318767/2240902c40):
1) Вместо (и во время) прокрутки в блоке двигается страница на фоне.
2) Как следствие, раскрываются/схлопываются верхняя и нижняя панели браузера.
3) Если контент блока меньше его высоты (прокрутка не нужна), то свайпы всегда прокручивают страницу на фоне.
4) Если блок полноэкранный, то его нижняя часть уходит под нижнюю панель браузера.
5) Меняется высота всплывающего блока и появляется пустота под ним.

Если изучить сайты с подобными элементами, то видно, что эту проблему либо игнорируют вообще, либо исправляют не полностью, либо чинят с помощью JavaScript-прокрутки вроде iScroll (что приводит к десятку других проблем и багов, вроде неверного расчета высоты прокручиваемой области или невозможности пользоваться элементами форм).

От этой проблемы и всех ее симптомов можно достаточно легко избавиться. Рассказываем как:

Отключить прокрутку страницы можно с помощью CSS, добавив position: fixed для body . Страница при этом прокрутится к началу, но эту мелочь легко исправить, установив, также, в стилях body значение свойства top соответствующее текущему положению прокрутки страницы.

В плане кода, решение проблемы легко умещается в один CSS-класс и пару функций (заблокировать/разблокировать прокрутку):
https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Посмотреть решение в действии вы можете, например, на бете новой мобильной версии онлайн-гипермаркета «Утконос» (https://www.utkonos.ru), презентацию и историю создания которой мы скоро опубликуем на сайте Студии.

23 октября 2017 • Скопировать ссылку Ссылка скопирована

  • Копировать ссылку
  • Telegram
  • Vkontakte
  • Поделиться

Горизонтальная прокрутка CSS: определение и как убрать на всех разрешения

Lorem ipsum dolor

Главный недостаток горизонтального скролла — в веб-версиях сайтов он смотрится «не очень» , п лю с п ользователи компьютеров и ноутбуков неохотно им пользуются. Из-за этого вокруг горизонтального скролла царит облако негатива , и поисковые системы жестко определили свою позицию.

Другое дело, когда горизонтальный скролл применяется в мобильных версиях веб-ресурсов. Копаясь в телефоне, удобно скроллить определенный контент «в сторону». Однак о г оризонтальный скролл оправдывается, когда реализован в отдельных блоках для удобства пользователя. Если, опять же , скроллится вся страница веб-сайта — это плохо.

Горизонтальный скролл CSS: особенности

  1. В веб-версиях ресурса он не заметен. Если организовать горизонтальный скролл в веб-версии сайта, тогда нужно быть готовым к тому, что пользователи будут не замечать его или просто игнорировать. Поэтому, если он организован специально, не нужно размещать важную информацию таким образом.
  2. Поисковые системы к горизонтальному скроллу относятся с презрением. Пользователям десктопных устройств не нравится скроллить «в сторону». Это не удобно. Поэтому поисковые системы пошли им навстречу и не рекомендуют использовать такой вид скролла на веб-ресурсе.
  3. В мобильной версии веб-сайт а г оризонтальный скролл позволяет компактно размещать однообразную информацию в пределах определенного блока. Например , товары одной категории в интернет-магазине. Допустим , у вас есть несколько важных категорий то ва ра, которые вы хотите разместить в начале страницы. В этом случае вы размещаете категории вертикально друг под дру гом , а товар в них размещаете так , чтобы он скроллился горизонтально.
  4. Горизонтальный скролл экономит много места на небольших экранах. При этом он не сильно нагружает страницу, если сравнивать с вариантом вертикального расположения всего контента.

Как убрать горизонтальный скролл с помощью CSS

Прежде чем убрать горизонтальную прокрутку возможностями CSS , давайте выясним , из-за чего она появляется. Рассматриваем тот случай, когда горизонтальный скролл появился «случайно», а не был сделан специально.

Горизонтальная прокрутка появляется в том случае, когда какой-то элемент «выходит» за область видимости контента страницы. У начинающих верстальщиков и веб-разработчиков это довольно частое явление. Чтобы избавит ь ся от горизонтальной прокрутки , нужно «выскочивший» элемент «загнать» в область видимости или удалить. Если удалось «поправить» такой элемент, тогда хорошо. Если нет, потому что вы не можете его найти, тогда есть проверенное CSS-свойство «overflow».

Как убрать горизонтальный скролл в html, используя CSS-свойство «overflow»

  • overflow-х — свойство, отвечающее за горизонтальную прокрутку;
  • overflow-у — свойство, отвечающее за вертикальную прокрутку.

Заключение

Сегодня вы узнали, что такое горизонтальная прокрутка и как ее можно специально использовать. Если же она возникла случайно, тогда есть проверенный способ, как убрать горизонтальный скролл возможностями CSS — использовать свойство «overflow».

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

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Запретить скролл мышью в DIV

На главной странице сайта имеется виджет Чат. И вот при прокрутке сайта — попадая на виджет чат, начинаем долго листать скролом сам чат, а не сайт.
Посетила идея — убрать скролл мышкой в определенном DIV блоке — НО при этом оставить «правую полосу прокрутки».

Долго копаясь в интернете нашел данный Java-скрипт:






… контент .


Скрипт блокирует колесико мышки для всего документа.
Если хочется запретить прокрутку для конкретного элемента, то document.body меняем на document.getElementById.

Так вот всю страницу он то блокирует) уже проверял, а теперь пробую понять о чем он имел ввиду под:

Если хочется запретить прокрутку для конкретного элемента, то document.body меняем на document.getElementById.

Пробовал так:






… контент .


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

Ваш адрес email не будет опубликован. Обязательные поля помечены *