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

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

  • автор:

EvgeniyaPronina / no scroll

Save EvgeniyaPronina/37abb60bd1d6f639806d934f00fa3ff3 to your computer and use it in GitHub Desktop.

Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

//Запретить скролл:
$(«html,body»).css(«overflow»,»hidden»);
//или только вертикальный скролл:
$(«body»).css(«overflow-y»,»hidden»);
//и на css:
position:fixed;overflow:hidden
//Запретить scroll на чистом JS можно так:
document.body.style.overflow = ‘hidden’;
//Убрать скроллинг на IPAD можно так:
document.body.addEventListener(‘touchmove’,function(event),false);
//на jQuery:
$(document).bind(‘touchmove’, false);
//P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:
создаем сам класс
.fixed
position:fixed; /*позицианируем чтобы исчез скролл*/
width:100%; /*что бы верстка не складывалась по ширине*/
>
//Применяем когда нам это необходимо
$(«body»).addClass(«fixed»);
//и убираем его когда нужно сновa включить прокрутку
$(«body»).removeClass(«fixed»);

Как скрыть scrollbar на сайте?

Он скрывает вертикальный scrollbar, но нельзя использовать прокрутку с помощью колесика мыши. А на мобильной версии не работает прокрутка вообще. Как решить эту проблему?

  • Вопрос задан более трёх лет назад
  • 4852 просмотра

Комментировать
Решения вопроса 2

::-webkit-scrollbar

Ответ написан более трёх лет назад
Нравится 2 2 комментария

dmitry_luzanov

Дмитрий Лузанов @dmitry_luzanov
А потом глянуть в мозилу -_-

bossonojka

Владимир @bossonojka Автор вопроса

Спасибо. Все работает. И еще вопрос. Есть такой код:

::-webkit-scrollbar-button < background-image:url(''); background-repeat:no-repeat; width:6px; height:0px >::-webkit-scrollbar-track < background-color:#32312e; box-shadow:0px 0px 0px #000 inset; >::-webkit-scrollbar-thumb < -webkit-border-radius: 5px; border-radius: 0px; background-color:#28a7f0; background-image:url('https://yraaa.ru/_pu/24/59610063.png'); background-position:center; background-repeat:no-repeat; >::-webkit-resizer < background-image:url(''); background-repeat:no-repeat; width:7px; height:0px >::-webkit-scrollbar

Можно ли сделать так, чтобы полоса прокрутки была прозрачная (скрыта), а остался только синий слайдер? Пробовал с помощью rgba и transparent, но ничего не получилось.

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

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

html, body < scrollbar-color: #458245 #714826; /* «цвет ползунка» «цвет полосы скроллбара» */ scrollbar-width: auto | thin | none; /* толщина */ >

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

Стилизация скролла в Mozilla Firefox

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

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

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

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

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

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

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

/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment

mCustomScrollbar

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

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

  • jquery.mCustomScrollbar.min.css
  • jquery.mCustomScrollbar.concat.min.js
  • mCSB_buttons.png

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

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

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

Инициализация через JavaScript
(function ($) < $(window).on("load", function () < $(".mycustom-scroll").mCustomScrollbar(); >); >)(jQuery);

Скрытие полосы прокрутки при сохранении функциональности прокрутки

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

Алексей Кодов
Автор статьи
10 июля 2023 в 18:08

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

Однако, стоит обратить внимание, что решения, которые работают в одних браузерах, могут не работать в других. Примером может служить стиль ::-webkit-scrollbar , который скрывает полосу прокрутки в браузерах на основе WebKit (например, Google Chrome), но не работает в Mozilla Firefox и Internet Explorer.

Также не всегда подходит решение с использованием свойства CSS overflow: hidden; , так как оно скрывает полосу прокрутки, но при этом блокирует возможность прокрутки страницы.

Решение

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

.hide-scrollbar < overflow-y: scroll; padding-right: 17px; /* Ширина полосы прокрутки */ >.content < width: 100%; padding-right: 17px; /* Ширина полосы прокрутки */ >

В данном случае блок .hide-scrollbar создает полосу прокрутки, но она скрыта за пределами видимой области благодаря отступу справа. Блок .content имеет ту же ширину, что и область прокрутки, поэтому его содержимое не будет обрезаться.

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

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

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