Запретить скролл(scroll) на css и jquery
Как же все таки убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы). Решение можно реализовать на jQuery так:
Запретить скролл:
$(«html,body»).css(«overflow»,»hidden»);
или только вертикальный скролл:
$(«body»).css(«overflow-y»,»hidden»);
и на css:
position:fixed;overflow:hidden
Запретить scroll на чистом JS можно так:
document.body.style.overflow = ‘hidden’;
Убрать скроллинг на IPAD можно так:
document.body.addEventListener(‘touchmove’,function(event),false);
на jQuery:
$(document).bind(‘touchmove’, false);
P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:
создаем сам класс
.fixed position:fixed; /*позицианируем чтобы исчез скролл*/
width:100%; /*что бы верстка не складывалась по ширине*/
>
Применяем через яваскри когда нам это необходимо
$(«body»).addClass(«fixed»);
и убираем его когда нужно сновa включить прокрутку
$(«body»).removeClass(«fixed»);
Поделись с друзьями:
Комментарии к записи Запретить скролл(scroll) на css и jquery отключены
Нет комментариев для записи Запретить скролл(scroll) на css и jquery
Как убрать вертикальный скролл в CSS, но так, чтоб можно было бы прокручивать страницу вниз? [закрыт]
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 4 года назад .
Помогите, хочу убрать вертикальный скролл в css, но чтоб страницу можно было прокручивать вниз колесиком мыши
Отслеживать
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
задан 18 мар 2019 в 20:39
Артур Полетаев Артур Полетаев
19 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
спрятать скролбар?
18 мар 2019 в 20:40
рабочий код покажите
18 мар 2019 в 20:40
Только вниз? Уточните вопрос.
19 мар 2019 в 5:33
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Вы не показали код, но могу дать такие css правила для того чтобы скрыть скроллбар и оставить возможность скролиинга
Существует правило CSS, которое может скрывать полосы прокрутки в браузерах на основе Webkit (Chrome и Safari). Это правило:
.element::-webkit-scrollbar
Существует правило CSS, которое может скрывать полосы прокрутки в IE 10+. Это правило:
.element
Там раньше было правило CSS , которые могли бы скрыть полосы прокрутки в Firefox, но с тех пор он считается устаревшим. Это правило было:
.element
А чтобы убрать скроллбар со всей страницы
::-webkit-scrollbar
Отслеживать
ответ дан 18 мар 2019 в 20:46
midnightelf18 midnightelf18
1,872 13 13 серебряных знаков 28 28 бронзовых знаков
Если хочешь убрать скролбар , тогда вот код CSS :
html < overflow: scroll; overflow-x: hidden; >::-webkit-scrollbar < width: 0px; /* remove scrollbar space */ background: transparent; /* optional: just make scrollbar invisible */ >/* optional: show position indicator in red */ ::-webkit-scrollbar-thumb
Отслеживать
ответ дан 18 мар 2019 в 20:48
132 11 11 бронзовых знаков
Так как действия со скролл-баров плохо работает, то приходится использовать костыли, типо такого:
.scroll-wrap < display: block; width: 300px; height: 100px; background: #ddd; overflow: hidden; >.scroll-wrap > .scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque vulputate elit quam, nec venenatis urna dictum sed.
Aenean ullamcorper magna a volutpat lobortis. Fusce cursus erat vitae hendrerit dignissim.
Quisque sapien velit, tristique ac fermentum at, ornare ac nulla.
Sed quis sapien sit amet ante tempus ultricies vitae eu mauris. Duis a rhoncus lectus.
Vestibulum dapibus nunc massa, nec posuere purus tincidunt eget.
Quisque rutrum lectus vulputate viverra laoreet.
Как запретить скролить страницу css
Designing a website exactly how you want often requires cutting out the excess — some whitespace here, an underline there, or, in today’s case, the scrollbar.
Whether for design or functionality reasons, it’s easy to hide the scrollbar on a page or page element with a bit of CSS. There are multiple ways to do this — hiding the scrollbar while allowing scrolling, hiding it while disabling scrolling, and keeping the scrollbar hidden only until it’s needed — some of which will work better based on your case.
To meet your design needs, this guide will cover all of these methods. Let’s get started.
How to Hide the Scrollbar in CSS (but Allow Scrolling)
Alas, there is no one dedicated CSS rule to hide the scrollbar while keeping the ability to scroll down a page/element. However, this is possible with a few browser-specific CSS rules. To hide the scrollbar and keep scrolling functionality, apply the following CSS to the body (for the entire page) or a specific element.
. where element is the selector you want to target. Here’s what this code looks like when applied to the whole page:
And here is the same code applied to a element:
Normally a scrollbar would appear in both of these cases, but our rules prevent this from happening on popular web browsers.
How to Hide the Scrollbar in CSS (and Prevent Scrolling)
To hide the scrollbar and disable scrolling, we can use the CSS overflow property. This property determines what to do with content that extends beyond the boundaries of its container.
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element’s border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container.
This disables both vertical and horizontal scrolling. As we’ll see next, you can also disable only horizontal scrolling or only vertical scrolling.
How to Hide the Vertical Scrollbar in CSS
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so:
How to Hide the Horizontal Scrollbar in CSS
Since horizontal scrolling is generally a bad idea, this rule can come in handy. To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden:
How to Hide the Scrollbar Until Needed
Hiding the scrollbar might aid your design in some cases. But in others, removing this part of the page can actually harm the user experience.
Most visitors associate the activity of scrolling with a visible scrollbar. So, if you apply this method to an entire page, it might seem strange to some. Also, scrollbars tell us how much of the page we have left to view (unless infinite scroll is implemented). Unless you have some other visual indicator that there is more content left to see, a lack of scrollbar could be off-putting.
User testing can clarify how a missing scrollbar impacts your site’s user experience, but a good compromise in many cases is to hide the scrollbar until the user initiates scrolling. To enable this in CSS, use the overflow: auto rule.
Hide the Scrollbar with CSS
Whether you’re building a page with pure CSS or a framework like Bootstrap, it only takes a few rules to hide the scrollbar from your page.
However, keep in mind that just because you can, it doesn’t mean that you should. For many users, the scrollbar is a handy visual cue that supports navigation. If you’re going to remove it, be sure to do this intentionally and in a way that aids your design.
Запретить скролл страници и дать возможность скроллить меню?
Три цикла в одной программе, дать возможность в меню выбрать тот или иной
Ребят подскажите пожалуйста. Имеется вот такое задание: Дана функция x=a*sin(k*t+2)*cos(k*t). .
Есть ли возможность скроллить все представление вместе с изображением?
Имеется фрагмент с представлением, которое не помещается полностью на экране, например, картинка и.
Запретить перетаскивать скролл мышью в скроллбаре
Каким образом можно запретить пользователю с помошью зажатой левой кнопки мыши на бегунке скролла.
Запретить прокручивать скролл при получении фокуса (android)
Всем привет! Я заметил что при получении фокуса на textarea, в андроиде скролл автоматически.
Сообщение было отмечено Black_Star как решение
Курсы javascript
подскажите, как запретить скроллинг всей страницы? прокрутка будет реализована вот так http://tympanus.net/Tutorials/Websit. _vertical.html и нужно исключить другие способы прокрутки страницы — колесиком мыши, клавишами вврех-вниз.
немало кодотруда получится, и из-за такой мелочи. а потом ещё в IE надо посмотреть будет. зачем оно вам?
Dim@,
а кто не позволяет считать keycode и вернуть браузеру false?
Окончательно вариант решения такой:
Конечно же, если зажать клавишу, то все таки проскачет, это нормально.
Насчет телефонов я думаю не особо будет замудоны с эффектами, дабы у них еще не выросла такая поддержка как у браузеров на ПК.
PS вообще, нафиг оно сдалось? запрет скролла в данном случае — пятое колесо, вообще ненужная фича.
Дофига тогда кода нужно писать ради красоты.
Притом если запретить клик на колесико мыши можно лишиться открытия новых вкладок, что ну очень не кстати. Вообщем идея дурная.
Переполнение контейнера в CSS
От автора: в CSS мы можем контролировать ситуацию, когда содержимое элемента слишком велико, чтобы уместиться в контейнер. Свойство для этого – overflow, это сокращение от свойств overflow-x и overflow-y. В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением.
Вступление
Чтобы использовать свойство overflow, мы должны быть уверены, что элемент, к которому мы его применяем, соответствует следующему:
Это элемент уровня блока (например: div, section) с заданной высотой через height или max-height. Под заданной высотой я подразумеваю, что элемент должен иметь содержимое (не пустой), чтобы не указывать высоту явно.
Или элемент с установленным для white-space значением nowrap.
Возможные значения
Свойство overflow может принимать следующие возможные значения: visible, hidden, scroll, auto.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Поскольку overflow — это сокращенное свойство, оно может принимать одно или два значения. Первое значение для горизонтальной оси, а второе для вертикальной.
visible
Значение по умолчанию, при котором содержимое может выходить за пределы родительского элемента. Это может быть установлено как:
Интересный факт, который вы должны знать, это то, что когда для одной оси установлено visible, а для другой — auto, для оси с visible вычисляется ключевое слово auto.
Согласно Mozilla Developer Network MDN: Установка для одной оси visible (по умолчанию), а для другой – auto, приводит к тому, что visible ведет себя как auto.
Например, если мы установим для элемента следующее:
Значение свойства overflow будет вычислено, как auto auto.
hidden
Когда содержимое длиннее, чем его родитель, оно будет обрезано. Тем не менее, содержимое можно прокручивать с помощью Javascript.
scroll
Значение scroll позволяет добавлять прокрутку, чтобы показать обрезанное содержимое, и она может быть горизонтальной или вертикальной.
На рисунке выше полоса прокрутки всегда видна, независимо от того, длинное ли содержимое или нет. Обратите внимание, что это зависит от операционной системы.
Я считаю это умным ключевым словом! Оно добавляет полосу прокрутки, только если содержимое длиннее контейнера.
Обратите внимание, что на рисунке полоса прокрутки видна только в том случае, когда содержимое длиннее контейнера. Далее мы пройдемся по свойствам, которые относятся к overflow.
Overflow-X
Это отвечает за ось X или горизонтальные стороны элемента.
Overflow-Y
Это отвечает за ось Y или вертикальные стороны элемента.
Примеры использования
Простой слайдер
Мы можем быстро создать простой слайдер, обрезая содержимое по горизонтали и позволяя ему прокручиваться.
В макете выше у нас есть карточки, которые уложены горизонтально, и есть полоса прокрутки, которая позволяет нам прокручивать и раскрывать больше контента. Чтобы реализовать это, нам нужно сделать следующее:
Вывести карточки в одну строку. Я буду использовать для этого flexbox.
Добавить для контейнера overflow-x.
И это работает в настольных браузерах. Однако при тестировании этого в Safari для iOS (12.4.1) прокрутка не работала. После некоторых проб и ошибок прокрутка все же заработала, когда я добавил дочерним элементам ширину. Работает без проблем в iOS (13.3).
Модальный контент
Когда модальное содержимое слишком длинное, мы можем легко сделать область прокручиваемой. Для этого у нас должно быть следующее:
Максимальная высота для модала.
Тело модала должно занимать все доступное пространство.
Карточка с закругленными углами
Когда у нас есть карточка, и мы хотим, чтобы ее углы были закруглены, мы часто добавляем border-radius для верхнего и нижнего углов, как показано ниже:
Для этого может потребоваться много работы, особенно если карточка имеет другой дизайн на мобильном телефоне. Например, вместо того, чтобы размещать дочерние элементы один над другим, они будут располагаться рядом друг с другом. Для этого случая полезно использовать для контейнера overflow: hidden, а затем добавить border-radius:
Тем не менее, это решение имеет некоторые оговорки, чтобы оно идеально подходило для всех случаев. Пожалуйста, не забудьте все протестировать.
Усечение текста
Для длинного контента мы можем обрезать текст с помощью свойства text-overflow.
Для элемента, который мы хотим усечь, я добавил следующее:
Это все! Обратите внимание, чтобы это работало, важно использовать overflow: hidden.
Анимация
Когда дело доходит до анимации, преимущество overflow: hidden заключается в обрезании скрытых элементов, которые можно показывать при наведении курсора. Посмотрите на рисунок ниже:
В CSS это будет выглядеть так:
У нас есть две кнопки, и у каждой есть псевдо-элемент, который переводится влево и вниз, соответственно.
Общие проблемы, связанные с переполнением
Прокрутка на мобильном устройстве
Например, когда у нас есть слайдер, недостаточно добавить overflow-x и тем ограничиться. В Chrome iOS нам нужно продолжать прокручивать и перемещать контент вручную. К счастью, есть свойство, которое может улучшить процесс прокрутки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это называется прокруткой на основе импульса. Согласно MDN: …содержимое продолжает прокручиваться некоторое время после завершения жеста прокрутки и удаления пальца с сенсорного экрана.
Встроенные блочные элементы
Согласно спецификации CSS: Базовая линия ‘inline-block’ является базовой линией его последнего блока строки в нормальном потоке, если у него нет либо линейных блоков в потоке, либо если его свойство ‘overflow’ не имеет вычисленного значения, отличного от ‘visible’, в этом случае базовая линия — это край нижнего блока.
Когда inline-block элемент имеет значение overflow, отличное от visible, это приведет к выравниванию нижнего края элемента на основе текстовой базовой линии его соседних элементов. Рассмотрим следующий пример.
Чтобы решить эту проблему, нам нужно изменить выравнивание кнопки, которая имеет overflow: hidden.
Похожие публикации:
- Как выровнять все по центру css
- Как выровнять по центру css
- Как скачать шрифт в css
- Как скрыть текст в css
Как запретить скролл body для мобилок?
Определить стиль для мобильного устройства с помощью CSS или JS и прописать fixed-позиционирование :
@media (max-width: 767px) < body < position:fixed; >> Возможно понадобится отключение масштабирования для непослушного андроида:
@viewport
Отслеживать
ответ дан 31 июл 2013 в 11:40
Viacheslav Soldatov Viacheslav Soldatov
1,181 1 1 золотой знак 15 15 серебряных знаков 44 44 бронзовых знака
- phonegap
- mobile-web
- html
- css
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.