Скрыть скроллбар css mozilla

Обновлено: 07.07.2024

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Как скрыть бегунок в ScrollBar?
Подскажите, пожалуйста, как скрыть бегунок в ScrollBar, если скроллинг пока невозможен? Скрытие.

Как отключить рекламу в Mozilla Firefox?
Как отключить рекламу в Mozilla Firefox, захожу в интернет и по бокам вылезают ссылки.

Как сохранять закладки в Mozilla Firefox?
Доброго всем времени суток! Подскажите, как сохранить закладки в Лисе? Скачал вчера, очень.

Добавлено через 2 минуты

Вы не сказали какой именно скролл вы пытаетесь скрыть и нафига вам строка overflow-y: scroll;?

Добавлено через 10 минут
Если вертикаль то лучше уточнить это у поддержки фаерфокса, что они курят в данный момент.

А какая задача-то стоит? Зачем его скрывать? ИМХО, нужно другое решение А какая задача-то стоит? Зачем его скрывать? ИМХО, нужно другое решение Прикрепил скрины. Один из них Firefox, другой -- Chrome.

Вы не сказали какой именно скролл вы пытаетесь скрыть и нафига вам строка overflow-y: scroll;?

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

Как восстановить закладки в Mozilla Firefox?
Привет всем. Вопрос в сабже. Пробую восстановить из резервных копий, но ничего не происходит.

Как зделать в mozilla firefox проверку орфографии
Как зделать в mozilla firefox проверку орфографии, что б была включена постоянно. Потомучто.

mozilla firefox,как отключить поиск яндекса
Как удалить поиск яндекса на верху?Скрин прилагаю. с фаером не давно,может чего не нащел.

Как запретить узел в dom на Mozilla Firefox
Имеется проблема с так называемой "Евой" на сайте алиэкспресс. Постоянно выскакивает, действует на.

Как защитить свои пароли в mozilla firefox ?
в мозилле фаерфокс, в настроках сохраненных паролей, их можно показать, при этом выскочит.

Как убрать баннер-вирус из Mozilla Firefox
Добрый вечер, в мозилле появился вирус. При каждом включении браузера выкидывает первым делом на.

Чтобы изменить скролл в Firefox, используйте следующий код.

Первое значение scrollbar-color изменяет цвет ползунка, второе - цвет скроллбара.

Значения scrollbar-width изменят толщину (ширину - для вертикального скроллбара, высоту - для горизонтального):

auto - толщина скролла по умолчанию;
thin - более тонкий вариант скролла;
none - скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar .

Сначала скачайте архив и извлеките к себе в проект файлы:

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.jpg

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript

Инициализация в HTML

Настройки

Темы mCustomScrollbar

Выбрать подходящую тему можно здесь.

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

Добавление скролла

Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :

overflow-y: auto; - для создания вертикального скролла (+ max-height);
overflow-x: auto; - для создания горизонтального скролла (+ max-width).

При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .

Как скрыть скролл

Скроем скролл, но оставим возможность прокрутки блока.

CSS Scroll Snap

Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.

Focuson - тема WordPress для бизнеса | Шаблоны и темы для веб-сайтов Themeforest

Я только что узнал, как скрыть полосу прокрутки в Google Chrome, сделал это с помощью этого кода:

Единственная проблема в том, что это не работает в Firefox. Пробовал много способов сделать это, но все равно не работает.

Вы можете использовать scrollbar-width правило. Вы можете scrollbar-width: none; чтобы скрыть полосу прокрутки в Firefox и по-прежнему иметь возможность свободно прокручивать.

У вас есть опечатка, но это должно быть приемлемым решением.
7 Это работает в последних версиях браузеров, но учтите, что это все еще экспериментальная функция. Также имейте в виду, что это свойство следует использовать с элементом, который создает полосу прокрутки. Например, если вы используете Angular Material md-content тогда тело не создает полосу прокрутки, а md-content элемент делает. Следовательно, body < scrollbar-width: none; >не будет работать, но md-content < scrollbar-width:none; >воля.
Спасибо, братан, ты сэкономил мне много времени !!

Чтобы скрыть полосу прокрутки в Chrome, Firefox и IE, вы можете использовать это:

Мне удалось скрыть полосу прокрутки, но я все еще могу прокручивать колесом мыши с помощью этого решения:

Это то, что мне нужно, чтобы отключить полосы прокрутки при сохранении прокрутки в Firefox, Chrome и Edge в:

Для webkit используйте следующее:

Для Mozilla Firefox используйте следующий код:

и если прокрутка не работает, добавьте

к конкретному элементу

Это что-то вроде общего решения:

Полоса прокрутки скрыта родительским div.

Это требует, чтобы вы использовали overflow: hidden в родительском div.

Для более поздней версии Firefox старые решения больше не работают, но я успешно использовал в v66.0.3 scrollbar-color свойство, которое вы можете установить на transparent transparent и что сделает полосу прокрутки в Firefox на рабочем столе, по крайней мере, невидимой (по-прежнему имеет место в области просмотра, а на мобильных устройствах не работает, но там полоса прокрутки представляет собой тонкую линию, которая помещается над содержимым справа).

Как у вас это получается в FF70 +? scrollbar-width: none; больше не работает. Мне нужно скрыть полосу прокрутки, а не сделать ее прозрачной.

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

Это не будет работать в Firefox, так как Firefox отказался от поддержки скрытых полос прокрутки с функциональностью (вы можете использовать overflow: -moz-scrollbars-none; в старых версиях).

Попробуйте использовать это:

2 Он скрывает scrollbar но прекратить действие прокрутки. В чем разница между overflow-y: -moz-hidden-unscrollable; а также overflow: hidden . На самом деле ничего, так что это неправильный ответ. но я даю вам голос. Спасибо.
2 разница в том, что первый скрывает только в firefox
Я проголосовал за тебя, но для меня так странно, почему ты -2 ? ваш ответ правильный
Вопрос в том, как скрыть полосы прокрутки, но при этом позволить пользователю прокручивать, если это необходимо, при переполнении содержимого, а не полностью отключать прокрутку. Причина в том, что полосы прокрутки FF уродливы и иногда появляются, даже если содержимое не переполняется. Все остальные браузеры предлагают для этого простое и элегантное решение css - может быть, даже IE!

В некоторых частных случаях (элемент находится в самой правой части экрана или его родительский переполнение скрыто) это может быть решением:

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

Это работало для IE11, FF60.9 и Chrome 80

На всякий случай, если кто-то ищет способ как-то сделать невидимую полосу прокрутки в firefox (79.0).

Вот решение, которое успешно работает для Chrome, IE, Safari и делает прозрачную полосу прокрутки в Firefox. Ничего из вышеперечисленного не помогло firefox (79.0) по-настоящему скрыть полосу прокрутки.

Пожалуйста, если кто-нибудь найдет способ сделать это без изменения цвета, это будет очень полезно. Пожалуйста, оставьте комментарий ниже.

Читайте также: