Скрыть скроллбар css mozilla
I just found out how to hide the scrollbar in Google Chrome, I did it with this code:
The only problem is that this doesn't work on Firefox. I tried many ways to do it but it still doesn't work.
doesn't seem like a good idea to do it that way. use css overflow hidden on html, body and use a wrapper div with 100% height and width.
This might be a little too obvious, but have you tried -moz- for Firefox? I agree with abhitalks though, this doesn't seem like a great way to do it.
Добавление скролла
Чтобы принудительно добавить скролл для блока, необходимо ограничить его по высоте/ширине и добавить overflow :
- overflow-y: auto; - для создания вертикального скролла (+ max-height);
- overflow-x: auto; - для создания горизонтального скролла (+ max-width).
При создании горизонтального скролла для текстового блока может понадобится добавление следующего css: white-space: nowrap; .
Как скрыть скролл
Скроем скролл, но оставим возможность прокрутки блока.
Стилизация скролла для webkit браузеров
Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.
CSS Scroll Snap
Позволяет прокручивать не попиксельно, а целыми блоками. Базовое использование.
Настройки
Стилизация скролла для Mozilla Firefox
Чтобы изменить скролл в Firefox, используйте следующий код.
Первое значение scrollbar-color изменяет цвет ползунка, второе - цвет скроллбара.
Значения scrollbar-width изменят толщину (ширину - для вертикального скроллбара, высоту - для горизонтального):
- auto - толщина скролла по умолчанию;
- thin - более тонкий вариант скролла;
- none - скрыть скролл.
Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox.
Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла
Какой-то контент. Текст, изображения или что-то ещё.
Темы mCustomScrollbar
Выбрать подходящую тему можно здесь.
Если же готовых тем недостаточно, то можете проинспектировать нужный элемент скролла и стилизовать как вам это необходимо.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.
Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.
В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.
Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.
mCustomScrollbar
Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar .
Сначала скачайте архив и извлеките к себе в проект файлы:
- jquery.mCustomScrollbar.min.css
- jquery.mCustomScrollbar.concat.min.js
- mCSB_buttons.jpg
Затем подключите jQuery и файлы плагина.
Или же можете подключить все файлы через CDN jsdelivr:
7 Answers 7
In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none; ! Woop woop! Here are the relevant docs (browser support is show at bottom of page).
Below is a simple css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.
According to this answer and everything I've been able to find on the web, there's no Firefox equivalent of the -webkit-scrollbar selector. Apparently there used to be a property, -moz-scrollbars-none , that you could use for this, but it's since been removed and people recommend using overflow:hidden or a hackish margin-right: -14px solution.
Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.
I tried margin-right: -14px , but the scrollbar didn't change position (nothing happened with it) although the content inside change position to the right (from margin-right -14)
overflow: hidden; works fine on FF Mac but you seem to still need to use overflow: -moz-scrollbars-none; on Windows (even on 39.0). However MDN states this is already obsolete so use with caution.
I was able to hide the scrollbar but still be able to scroll with mousewheel with this solution:
This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:
You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.
Short version for lazy people:
I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.
this is what I've found to work for me on opensuse/kde: in userChrome.css;
use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.
thing that i did, but don't always work, any longer: in userContent.css
above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.
Всем привет! Сегодня я столкнулся с проблемой в Mozilla Firefox: он не может адекватно отключить скроллбар.
Я использовал разные хаки:
Все они убирают скроллбар вместе с возможностью прокрутки колесом. Знает ли кто-нибудь способ отключения скроллбара без отключения возможности использования колесика мыши? Главное чтобы этот способ не использовал лишние контейнеры и громоздкие плагины.
Как раз те самые варианты про плагины и контейнеры про который я говорил. Спасибо, я их конечно рассматривал, но это все слишком громоздко, надеюсь ктонибудь знает способ по-проще.
Если коротко - нет. Лично я считаю - это хорошо. Скроллбар нужен, не всем удобно колесом скроллить, особенно, если много контента. Бесят сайты, где горе-дизайнеры отрубают скроллбар. Сразу хочется уйти.
В моем случае дизайнер не предусмотрел в макете место под скроллбар, из-за чего в месте где строится Масонри секта все рушится. Лично я отрубаю скроллбар на лендингах, потому что там всегда прилепленная хэш навигация
litvin2: Я смотрю сегодня все перевозбуждены и слегка не адекватны. Прежде всего глупо меня обвинять в плохом качестве проектирования сайтов во всем интернете, как-то по-юношески это.
Во-первых я всего лишь исполнитель. Если мне дают макет в котором проектировщик предусмотрел место под скроллбар я его оставляю, если нет -- не оставляю. Во-вторых, когда я делаю проекты для себя я думаю о пользователях. Отключая скроллбар я всегда предлагаю закрепленную хэшевую навигацию + ссылки быстрого переход. И делаю я в основном это только на своих лендингах.
Раз уж мы перешли на личности, то из-за таких глупых комментаторов как вы, современный сайты превратились черт знает в что.
Для особо одаренных обобщу:
Разработчиками браузеров предусмотрена функция отключения скроллбара. Это значит что этот функционал востребован.
__Я не могу отвечать за то кто, как и c какой успешностью использует этот функционал__.
Я могу отвечать только за те сайты, которые я сам проектирую, а затем создаю. Если эта очевидная мысль недоступна для вас, просто пройдите мимо, не уподобляйтесь этим двум с пеной у рта, которые обвиняют меня в том к чему я не имею отношения.
Дмитрий Сергеевич: Вот такие сайты и бесят. Ок, стандартный скроллбар выглядит плохо и не всегда вписывается. Прикрути тогда кастомный, исчезающий. Но чтобы можно было зажать мышкой на него и крутить страницу.
Вот у меня, например, на тачпаде в ноуте перестал скролл работать. Что мне делать? Клавиатурой не хочу скроллить. Тем более, стрелки на этом сайте скролят по 5 пикселей. А PgUp/PgDown далеко от тачпада.
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
- ::-webkit-scrollbar — это фон самого скроллбара.
- ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
- ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
- ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
Инициализация
Инициализация через JavaScript
Инициализация в HTML
16 Answers 16
You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.
This works on latest browser, but please note that this is still an experimental feature. Also, keep in mind that this property should be used with the element that is producing the scrollbar. For example, if you are using Angular Material's md-content then, the body does not produce the scrollbar, rather the md-content element does. Hence, body < scrollbar-width: none; >will not work, but md-content < scrollbar-width:none; >will.
To hide scroll bar on Chrome, Firefox and IE you can use this:
I was able to hide the scrollbar but still be able to scroll with mouse wheel with this solution:
This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :
For webkit use following:
For Mozilla Firefox use following code:
and if scrolling does not work then add
to specific element
Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.
For more recent version of Firefox the old solutions don't work anymore, but I did succesfully used in v66.0.3 the scrollbar-color property which you can set to transparent transparent and which will make the scrollbar in Firefox on the desktop at least invisible (still takes place in the viewport and on mobile doesn't work, but there the scrollbar is a fine line that is placed over the content on the right).
How do you do it in FF70+? scrollbar-width: none; doesn't work anymore. I need to hide the scrollbar, not make it transparent.
This is something of a generic solution:
The scroll bar is hidden by the parent div.
This requires you to use overflow:hidden in the parent div.
This fix is solving the problem for FF but have worse side effects in other browsers (cutting the text)
I want to hide a scroll bar in page but I can scroll like it has a scroll bar. so I cant use overflow:hidden because I want that I can scroll like normal but cannot see a scroll bar.
so I use this css code (class not-scroll-body is a class of body tag)
It works in Chrome , but when I use -moz- instead of -webkit- like this
It doesn't work in Firefox.
What can I do to to make it work?
Thank you for every answer and sorry for my poor english language :)
Читайте также: