Как скрыть скроллбар в Файрфоксе

Как скрыть скроллбар в Файрфоксе

27 августа 2018

Третий раз за неделю сталкиваюсь с проблемой со скроллбарами в Файрфоксе. Похоже, пришло время поговорить об этом.

Топ 10 продающих лендингов для Вордпресс

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

Я всегда проверяю работоспособность разрабатываемых сайтов в популярных браузерах. В том числе и в Файрфоксе. И если бы не моя привычка тестировать сайты под Виндоус, возможно я бы никогда узнал об этой проблеме. Потому что в Файрфокс для Мак ОС все работало, как задумано.

Проблема наблюдается в Firefox Quantum 61.0.2 (64-бит) и заключается в следующем:

Если в блоке разрешена прокрутка (например, вертикальная overflow-y:scroll), то у этого блока выводится скроллбар. Даже если контент помещается в блок без прокрутки, все равно выводится серый неактивный скроллбар.

Аналогичная проблема возникает и с тегами EMBED, IFRAME. В общем, везде где возможен скролл.

Если разрешен вертикальный и горизонтальный скроллинг, пустой блок будет выглядеть так:

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

Раньше для Файрфокс было свойство -moz-scrollbars-none. Сейчас его нет, и решение, которое чаще всего гуглится не работает:

.element { 
	overflow: -moz-scrollbars-none;
}

Как быть?

Есть несколько способов решения этой задачи. Самым простым мне показался способ со сдвигом скроллбара в невидимую область.

Если не считать overflow-y: scroll, получается всего две строчки.

.element {
	overflow-y: scroll;
	right: -20px;
	margin-left: -20px;
}

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

Популярное в этом месяце
Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

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

Лучшие премиум-темы для Вордпресс с пожизненной поддержкой
Подробнее