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

Как скрыть scrollbar css

  • автор:

Скрытие скроллбаров в браузерах

Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через CSS для тега BODY следующую команду.

body

Чтобы скрыть отдельные полосы прокрутки используем следующие команды для тега HTML (работает только в FF и IE) в 2008 году:

html < overflow-x : hidden; /*скрытие горизонтальной прокрутки*/ overflow-y : hidden /*скрытие вертикальной прокрутки*/ >

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

.element::-webkit-scrollbar < width : 0 !important /* Webkit */ >.element < -ms-overflow-style : none; /* IE10+ */ overflow : -moz-scrollbars-none; /* FireFox, но может не работать */ >

Более универсальное решение для скрытия скролбара, которое работает в 2019 году:

::-webkit-scrollbar < /* Webkit */ width : 0; /* ширина scrollbar'a */ background : transparent /* опционально */ >html < -ms-overflow-style : none; /* IE 10+ */ scrollbar-width : none /* Firefox */ >

Вообще нельзя прятать прокрутки в браузере. Разрешение может быть разным, скрывая прокрутку, вы будете терять часть пользователь с экранами маленьких разрешений, например мобильные устройства.

Как сделать полосу прокрутки невидимой, но оставить скроллинг?

Update! Это баг на ios, решения нету. На андроид все отлично. Спасибо. Работает самый первый вариант. Собственно, уж очень понравилось сделать горизонтальную прокрутку как на Medium.com (на малых разрешениях), изящно. Все сделал, но есть полоса прокрутки, как сделать её невидимой? Тот же вариант горизонтальной прокрутки на поисковике Google Стили у блока прокрутки div :

-ms-overflow-style: none overflow: -moz-scrollbars-none overflow-x: scroll overflow-y: hidden &::-webkit-scrollbar width: 0 !important height: 0 display: none !important background: transparent 

Отслеживать
задан 19 окт 2018 в 12:46
154 2 2 серебряных знака 13 13 бронзовых знаков
какую горизонтальную прокрутку?
19 окт 2018 в 12:48

@ThisMan уже есть) Та дело не в стилизации, просто убрать саму полосу, но оставить скролл. На браузерах работает, а на смартфоне (iphone se) ни в какую.

19 окт 2018 в 12:49
@Predaytor нету никакой полосы прокрутки
19 окт 2018 в 12:54
@Избытоксусликов сразу внизу под глав. изображением — Node.js ХАРДКОР .
19 окт 2018 в 13:01
вы в вопросе то напишите про Iphone и что баг на мобилках
19 окт 2018 в 13:55

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

* < margin:0; >#container1 < height: 100%; width: 100%; border: 1px solid green; overflow: hidden; >#container2 < width: 100%; height: 99%; border: 1px solid blue; overflow: auto; padding-right: 15px; >html, body < height: 99%; border: 1px solid red; overflow:hidden; >p
 

Произвольный текст скрол вниз

Произвольный текст скрол вниз

Произвольный текст скрол вниз

Произвольный текст скрол вниз

Произвольный текст скрол вниз

Произвольный текст скрол вниз

Произвольный текст скрол вниз

.element, .outer-container < width: 200px; height: 200px; >.outer-container < border: 5px solid purple; position: relative; overflow: hidden; >.inner-container < position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; >.inner-container::-webkit-scrollbar
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.

Горизонтальная: (Update)

$(function() < var curDown = false, curYPos = 0, curXPos = 0; $(".block").mousemove(function(m)< if(curDown === true)< $(".block").scrollTop($(".block").scrollTop() + (curYPos - m.pageY)); $(".block").scrollLeft($(".block").scrollLeft() + (curXPos - m.pageX)); >>); $(".block_width_item").mousedown(function(m)< curDown = true; curYPos = m.pageY; curXPos = m.pageX; >); $(".block_width_item").mouseup(function()< curDown = false; >); >)
.block < width: 100%; display: inline-block; overflow: hidden; >.block::-webkit-scrollbar < display: none; >.block_width < width: 1120px !important; display: flex; flex-direction: row; flex-wrap: nowrap; overflow: auto; >.block_width_item < width: 200px; >*
 
Поиск
Новости
Видео
Изображение
Карта

jquery-ui.js

jQuery(".block_width").draggable( < cursor: "move", axis: "x", stop: function() < if(jQuery(this).position().left >1 || jQuery(this).position().left < -800) jQuery(this).css("left", "10px"); >>);
.block < width: 100%; display: inline-block; overflow: hidden; >.block::-webkit-scrollbar < display: none; >.block_width < width: 1120px !important; display: flex; flex-direction: row; flex-wrap: nowrap; overflow: auto; >.block_width_item < width: 200px; cursor: pointer >*
  
Поиск
Новости
Видео
Изображение
Карта

Как спрятать scrollbar в div и отставить возможность скроллинга?

Нужно скрыть полосу прокрутки, но возможность прокрутки (например, с помощью колеса мышки оставить).

Или может как то сделать scrollbar прозрачным?

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

1 комментарий

Средний 1 комментарий

THeEmptYGoD @THeEmptYGoD

Вот рабочий способ:

::-webkit-scrollbar display: none;
>

Просто скопируйте и вставьте в самое начало! 🙂

Решения вопроса 0
Ответы на вопрос 11

standy

Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.

Есть еще одно решение:

/* хром, сафари */ .element::-webkit-scrollbar < width: 0; >/* ie 10+ */ .element < -ms-overflow-style: none; >/* фф (свойство больше не работает, других способов тоже нет)*/ .element

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

Сегодня узнаем, как можно с помощью CSS скрыть полосу прокрутки.

body < overflow: hidden; /* Скрываем scrollbars */ >

Чтобы скрыть только вертикальную или только горизонтальную полосу прокрутки, можно использовать:

body < overflow-y: hidden; /* Скрываем вертикальный scrollbar */ overflow-x: hidden; /* Скрываем горизонтальный scrollbar */ >

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

Чтобы скрыть скроллбар, но сохранить возможность скролить содержимое, можно использовать следующий код:

/* Скрываем scrollbar для Chrome, Safari и Opera */ .example::-webkit-scrollbar < display: none; >/* Скрываем scrollbar для IE, Edge и Firefox */ .example < -ms-overflow-style: none; /* IE и Edge */ scrollbar-width: none; /* Firefox */ >

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

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