Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки
Если Вы хотите убрать полосу прокрутки с сайта и оставить возможность прокручивания страницы, то эта короткая статья для Вас.
Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на css.
Пришлось более глубже копнуть, и на данный момент пришёл к выводу, что кроссбраузерного решения на css не существует.
В основном, все кроссбраузерные способы сводятся либо к изменению архитектурной конструкции HTML, либо же к использованию JavaScript.
Упорядочив информацию, привожу ниже в все три способа скрытия полосы прокрутки: на CSS, с помощью HTML конструкций и с помощью JavaScript.
1-ый способ (css):
Ключевой момент — использование псевдоэлемента -webkit-scrollbar с шириной равной нулю.
Конструкция HTML будет иметь следующий вид:
Контент.
CSS стили будут иметь следующий вид:
.sposob-1 < width: 250px; height: 342px; margin: 0 25px; overflow-x: hidden; overflow-y: scroll; >.sposob-1-inside < width: 100%; margin: 0 0px; background: #008C00; >.sposob-1::-webkit-scrollbar
Первый способ скрытия полосы прокрутки будет работать только для браузеров на движке WebKit.
2-ой способ (HTML+CSS):
Ключевой момент — ширину внутреннего контейнера задаём больше на 20px относительно внешнего контейнера, что примерно равно ширине полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
Контент.
CSS стили будут иметь следующий вид:
.sposob-2 < width: 250px; height: 342px; margin: 0 25px; overflow: hidden; >.sposob-2-outside < width: 270px; height: 100%; padding-right: 0px; overflow-x: hidden; overflow-y: scroll; >.sposob-2-inside
Говоря о скрытии скроллбара с помощью HTML-конструкций необходимо донести читателю, что кроме вышеприведённого способа, в котором полоса прокрутки скрывается за счёт увеличения свойства width относительно внешнего контейнера, существуют и другие подходы. Это и увеличение горизонтальных отступов и изменение свойств позиционирования и возможно другие. Здесь уже как мысль развернётся.
3-ий способ (JavaScript):
Ключевой момент — с помощью js-скрипта задаём правый отступ (padding-Right) внутреннего контейнера, что бы увеличить его ширину для скрытия полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
Контент.
CSS стили будут иметь следующий вид:
.sposob-3 < width: 250px; height: 342px; margin: 0 25px; overflow: hidden; >.sposob-3-inside
JavaScript код будет следующим:
var parent = document.getElementById('spb-1'); var child = document.getElementById('spb-2'); child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
Третий способ — это по сути второй, только в данном случае мы увеличиваем ширину внутреннего контейнера относительно внешнего за счёт задания правого внутреннего отступа (padding-Right) с помощью js-скрипта.
Как отключить полосу прокрутки для навигационной панели в HTML/CSS?
Есть шаблон страницы, содержащей навигационную панель и контент отдельными блоками. При переполнении страницы в content появляется полоса прокрутки, которая задевает navbar. Сама полоса прокрутки нужна, но только внутри content, можно ли отображать ее после навигационной панели?
Отслеживать
задан 3 апр 2023 в 8:04
359 4 4 серебряных знака 12 12 бронзовых знаков
Добавьте стили и сделайте воспроизводимый пример
3 апр 2023 в 8:47
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.navbar < background: teal; overflow: hidden; /*обрезам все что выходит за рамки нашего блока*/ width: 100%; height: 50px; >.content < background: #555555; height: 100px; overflow: auto; /*если контет будет выпирать из блока то будет появлтся скрол*/ >.content > div
Панель управлению копаблем а тут много мусораааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа a все тут конец Отслеживать
ответ дан 3 апр 2023 в 20:24
1 1 1 бронзовый знак
Судя из вопроса, человеку нужен скролл (вертикальный) лишь в блоке с контентом . А не для всего body , который будет и справа от навигации.
Как убрать полосу прокрутки css
У нас есть вертикальная и горизонтальная полосы прокрутки. Можно убрать их как по отдельности, так и сразу. Ниже свойства который нужно добавить блоку в том или ином случае.
overflow: hidden; overflow-y: hidden; /*для вертикального*/ overflow-x: hidden; /*для горизонтального*/ Скрытие вертикальной полосы прокрутки в CSS, если она не требуется
Довольно распространенной проблемой, с которой могут столкнуться начинающие веб-разработчики, является необходимость скрыть вертикальную полосу прокрутки, если она не требуется. Другими словами, если объем контента не превышает текущую высоту блока, полоса прокрутки должна быть скрыта.
Вот пример простого стиля CSS, где применяется такая проблема:
.block
В этом случае, даже если контент не превышает 500 пикселей по высоте, вертикальная полоса прокрутки все равно будет видна.
Для решения этой проблемы следует использовать свойство overflow-y: auto; . Это свойство автоматически регулирует появление полосы прокрутки, в зависимости от объема содержимого. Если содержимое блока не превышает его высоту, полоса прокрутки не будет отображаться.
.block
Также возникает вопрос о том, как автоматически увеличивать ширину блока, если содержимое превышает его текущую ширину, чтобы контент не выходил за пределы блока. В этом случае можно использовать свойство overflow-x: auto; . Если содержимое блока превышает его ширину, появится горизонтальная полоса прокрутки.
.block
Таким образом, использование свойств overflow-y: auto; и overflow-x: auto; позволяет автоматически регулировать появление полос прокрутки в зависимости от объема содержимого блока.