Как скрыть вертикальную и горизонтальную полосы прокрутки для блока div
Полосы прокрутки эффективны и необходимы для контроля общей высоты или ширины страницы. Они позволяет получить доступ к содержимому блока DIV , которое выходит за его пределы, либо с помощью прокрутки, либо с помощью функции панорамирования.
По умолчанию стилизация для полос прокрутки ( скролла ) определяются браузером, а не темой оформления вашего сайта. Поэтому их использование без дополнительной обработки может привести к результату, который будет выглядеть странно.
Браузеры на основе Webkit , такие как Chrome , Safari и т. д., предоставляют псевдоселектор для настройки цвета и размера полос прокрутки в соответствии с настройками сайта.
Вы можете убрать полосу прокрутки ( скролл ), используя следующий фрагмент CSS- кода :
.__sb-test::-webkit-scrollbar
Поскольку этот CSS-селектор специфичен для webkit-браузеров , мы должны создать резервный вариант для достижения такого же эффекта в других браузерах, таких как Firefox , IE , Edge и т.д.
Возможное решение для создания скролла на чистом CSS :
.outer < min-height:200px; width:200px; overflow:hidden; >.inner
Приведенный выше CSS-код позволяет убрать вертикальный скролл, но у этого способа есть один недостаток — в разных браузерах будет разная ширина / размер полос прокрутки. Поэтому нельзя статически указать их. Таким образом, нам нужно адаптировать данную концепцию и прописать динамическое определение высоты прокрутки с помощью JavaScript .
Решение на основе JS
Приведенный ниже скрипт позволяет скрыть полосу прокрутки ( скролл ) последовательно во всех браузерах. Это достигается следующим образом:
- Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll ;
- Затем вычисляется ширина полосы прокрутки;
- Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.
_findScrollbarWidth() < let parent: JQuery; let child: JQuery; if (this.sbarWidth === null) < const style = document.createElement('style'); style.innerHTML = '.__sb-test::-webkit-scrollbar < width: 0px; >‘; document.body.appendChild(style); parent = $(‘
‘) .appendTo(‘body’); child = parent.children(); this.sbarWidth = child.innerWidth() — child.height(99).innerWidth(); // очистка parent.remove(); document.body.removeChild(style); > > _hideScrollBars()
Как скрыть скроллбар?
Сегодня узнаем, как можно с помощью CSS скрыть полосу прокрутки.
body < overflow: hidden; /* Скрываем scrollbars */ >
Чтобы скрыть только вертикальную или только горизонтальную полосу прокрутки, можно использовать:
body < overflow-y: hidden; /* Скрываем вертикальный scrollbar */ overflow-x: hidden; /* Скрываем горизонтальный scrollbar */ >
Скрываем скроллбар, но сохраняем возможность прокрутки
Чтобы скрыть скроллбар, но сохранить возможность скролить содержимое, можно использовать следующий код:
/* Скрываем scrollbar для Chrome, Safari и Opera */ .example::-webkit-scrollbar < display: none; >/* Скрываем scrollbar для IE, Edge и Firefox */ .example < -ms-overflow-style: none; /* IE и Edge */ scrollbar-width: none; /* Firefox */ >
EvgeniyaPronina / no scroll
Save EvgeniyaPronina/37abb60bd1d6f639806d934f00fa3ff3 to your computer and use it in GitHub Desktop.
Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| //Запретить скролл: |
| $(«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»); |
Скрытие скроллбаров в браузерах
Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через CSS для тега BODY следующую команду.
body
Чтобы скрыть отдельные полосы прокрутки используем следующие команды для тега HTML (работает только в FF и IE) в 2008 году:
html < overflow-x : hidden; /*скрытие горизонтальной прокрутки*/ overflow-y : hidden /*скрытие вертикальной прокрутки*/ >Что бы скрыть скролбар, но при этом иметь прокрутку блока колесиком мышки или свайпом, используем другой код:
.element::-webkit-scrollbar < width : 0 !important /* Webkit */ >.element < -ms-overflow-style : none; /* IE10+ */ overflow : -moz-scrollbars-none; /* FireFox, но может не работать */ >Более универсальное решение для скрытия скролбара, которое работает в 2019 году:
::-webkit-scrollbar < /* Webkit */ width : 0; /* ширина scrollbar'a */ background : transparent /* опционально */ >html < -ms-overflow-style : none; /* IE 10+ */ scrollbar-width : none /* Firefox */ >Вообще нельзя прятать прокрутки в браузере. Разрешение может быть разным, скрывая прокрутку, вы будете терять часть пользователь с экранами маленьких разрешений, например мобильные устройства.