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

Как отключить полосу прокрутки css

  • автор:

Убрать сдвиг сайта при появлении полосы прокрутки

auto при переполнении блока с overflow: scroll; или overflow: auto; , сдвинув содержимое, появится полоса прокрутки stable для полосы прокрутки зарезервировано место с одной стороны stable both-edges для полосы прокрутки зарезервировано место с обеих сторон initial auto inherit наследует значение родителя unset auto

Папа у Васи силён в математике, Учится папа за Васю весь год. Где это видано, где это слыхано, — Папа решает, а Вася сдаёт?!

  
Содержимое

Если сайт размещён по центру окна браузера (содержимое ограничено зелёными линиями), то при переходе с короткой страницы на длинную, контент дёргается влево на небольшое расстояние, равное ширине вертикальной полосы прокрутки (scrollbar). В приведенном ниже примере нужно нажать на ссылку «Яблоко».

Чтобы сайт не сдвигался, можно полосу прокрутки добавить на все страницы сайта. Там, где она не нужна, scrollbar окрашен в серый неактивный цвет.

 @media screen and (min-width: 500px) /* если окно браузера больше максимальной ширины сайта */ html < scrollbar-gutter: stable both-edges; >> header, main, footer 
Ссылка …
  • Как убрать горизонтальную прокрутку
  • Прокрутка модального окна

NMitra До появления scrollbar-gutter , можно было использовать решение с сайта aykevl.nl. Где 100vw — это ширина окна браузера с полосой прокрутки или без неё при её отсутствии.

Как скрыть вертикальную и горизонтальную полосы прокрутки для блока div

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

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

Браузеры на основе Webkit , такие как Chrome , Safari и т. д., предоставляют псевдоселектор для настройки цвета и размера полос прокрутки в соответствии с настройками сайта.

Вы можете убрать полосу прокрутки ( скролл ), используя следующий фрагмент CSS- кода :

.__sb-test::-webkit-scrollbar

Поскольку этот CSS-селектор специфичен для webkit-браузеров , мы должны создать резервный вариант для достижения такого же эффекта в других браузерах, таких как Firefox , IE , Edge и т.д.

Возможное решение для создания скролла на чистом CSS :

This is very lengthy statement that will wrap. This is very lengthy statement that will wrap and show scroll

.outer < min-height:200px; width:200px; overflow:hidden; >.inner

Приведенный выше CSS-код позволяет убрать вертикальный скролл, но у этого способа есть один недостаток — в разных браузерах будет разная ширина / размер полос прокрутки. Поэтому нельзя статически указать их. Таким образом, нам нужно адаптировать данную концепцию и прописать динамическое определение высоты прокрутки с помощью JavaScript .

Решение на основе JS

Приведенный ниже скрипт позволяет скрыть полосу прокрутки ( скролл ) последовательно во всех браузерах. Это достигается следующим образом:

  1. Этот скрипт принудительно включает полосу прокрутки для элемента с помощью CSS overflow-x:scroll ;
  2. Затем вычисляется ширина полосы прокрутки;
  3. Рассчитанная ширина устанавливается как отрицательный отступ для внешнего элемента. Это эффективно скрывает полосу прокрутки во всех браузерах.

_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

У нас есть вертикальная и горизонтальная полосы прокрутки. Можно убрать их как по отдельности, так и сразу. Ниже свойства который нужно добавить блоку в том или ином случае.

overflow: hidden; overflow-y: hidden; /*для вертикального*/ overflow-x: hidden; /*для горизонтального*/ 

Скрытие скроллбаров в браузерах

Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через 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 */ >

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

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

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