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

Скрытие полосы прокрутки на HTML-странице

Можно ли использовать CSS, чтобы скрыть полосу прокрутки? Как бы ты это сделал?

19 ответов

Установите overflow: hidden; в теге body следующим образом:

Приведенный выше код скрывает как горизонтальную, так и вертикальную полосу прокрутки.

Если вы хотите скрыть только вертикальную полосу прокрутки , используйте overflow-y :

А если вы хотите скрыть только горизонтальную полосу прокрутки , используйте overflow-x :

Примечание. Это также отключит функцию прокрутки. Обратитесь к ответам ниже, если вы просто хотите скрыть полосу прокрутки, но не функцию прокрутки.

WebKit поддерживает псевдоэлементы полосы прокрутки, которые можно скрыть с помощью стандартных правил CSS:

Если вы хотите, чтобы все полосы прокрутки были скрыты, используйте

Я не уверен насчет восстановления — это сработало, но может быть правильный способ сделать это:

Конечно, вы всегда можете использовать width: 0 , который затем можно легко восстановить с помощью width: auto , но я не сторонник злоупотребления width для настройки видимости.

Firefox 64 теперь поддерживает экспериментальное свойство ширины полосы прокрутки по по умолчанию (63 требует установки флага конфигурации). Чтобы скрыть полосу прокрутки в Firefox 64:

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

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

Да вроде ..

Когда вы задаете вопрос «Можно ли каким-либо образом удалить полосы прокрутки в браузере, а не просто скрыть или замаскировать», все ответят «Невозможно», потому что невозможно удалить полосы прокрутки из всех браузеров совместимым и кросс-совместимым способом, а затем есть весь аргумент в пользу удобства использования.

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

Это просто означает, что мы должны проактивно заменить то же поведение, которое браузер обычно делает для нас, и сказать браузеру спасибо, но не спасибо, приятель. Вместо того, чтобы пытаться удалить полосы прокрутки (что, как мы все знаем, невозможно), мы можем избежать прокрутки (что вполне возможно) и прокручивать элементы, которые мы создаем и над которыми мы больше контролируем.

Создайте div со скрытым переполнением. Обнаруживать, когда пользователь пытается прокрутить, но не может, потому что мы отключили возможность браузеров прокручивать с помощью overflow: hidden .. и вместо этого перемещать контент вверх с помощью JavaScript, когда это происходит. Тем самым создавая нашу собственную прокрутку без прокрутки по умолчанию в браузере или используйте плагин, например iScroll.

Из соображений тщательности; все специфические для поставщика способы управления полосами прокрутки:

Internet Explorer 5.5+

* Эти свойства никогда не входили в спецификацию CSS, не утверждались и не указывались поставщиком, но они работают в Internet Explorer и Konqueror. Их также можно установить локально в пользовательской таблице стилей для каждого приложения. В Internet Explorer вы найдете его на вкладке «Специальные возможности», в Konqueror — на вкладке «Таблицы стилей».

Начиная с Internet Explorer 8, эти свойства имели префикс поставщика от Microsoft, но они все еще не были одобрены W3C. .

Дополнительные сведения об Internet Explorer

Internet Explorer делает доступным scroll , который устанавливает, следует ли включать или отключать полосы прокрутки; его также можно использовать для получения значения положения полос прокрутки.

В Microsoft Internet Explorer 6 и более поздних версиях, когда вы используете объявление !DOCTYPE для указания режима, совместимого со стандартами, этот атрибут применяется к элементу HTML. Если режим, соответствующий стандартам, не указан, как в более ранних версиях Internet Explorer, этот атрибут применяется к элементу BODY , а НЕ к элементу HTML .

Также стоит отметить, что при работе с .NET класс ScrollBar в System.Windows.Controls.Primitives в среде презентаций отвечает за отображение полос прокрутки.

WebKit

Расширения WebKit, связанные с настройкой полосы прокрутки:

Enter image description here

Каждый из них может быть объединен с дополнительными псевдоселекторами:

  • :horizontal — горизонтальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют горизонтальную ориентацию.
  • :vertical — вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию.
  • :decrement — псевдокласс декремента применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки уменьшать позицию представления при использовании (например, вверх на вертикальной полосе прокрутки, влево на горизонтальной полосе прокрутки).
  • :increment — Псевдокласс приращения применяется к кнопкам и элементам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки увеличивать позицию представления при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
  • :start — начальный псевдокласс применяется к кнопкам и элементам дорожки. Он указывает, находится ли объект перед большим пальцем.
  • :end — конечный псевдокласс применяется к кнопкам и элементам дорожки. Он указывает, находится ли объект после большого пальца.
  • :double-button — псевдокласс двойной кнопки применяется к кнопкам и фрагментам дорожки. Он используется для определения того, является ли кнопка частью пары кнопок, которые вместе находятся на одном конце полосы прокрутки. Для элементов дорожки это указывает, упирается ли элемент дорожки в пару кнопок.
  • :single-button — Псевдокласс для одной кнопки применяется к кнопкам и фрагментам дорожки. Он используется для определения того, находится ли кнопка сама по себе в конце полосы прокрутки. Для фрагментов дорожки это указывает, упирается ли фрагмент дорожки в одноэлементную кнопку.
  • :no-button — применяется к фрагментам дорожки и указывает, доходит ли фрагмент дорожки до края полосы прокрутки, т.е. на этом конце дорожки нет кнопки.
  • :corner-present — применяется ко всем частям полосы прокрутки и указывает, присутствует ли угол полосы прокрутки.
  • :window-inactive — применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки. (В последних ночных сборниках этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.)

Примеры этих комбинаций

Дополнительные сведения о Chrome

addWindowScrollHandler общедоступный статический HandlerRegistration addWindowScrollHandler (обработчик Window.ScrollHandler)

Добавляет обработчик Window.ScrollEvent Параметры: handler — обработчик Возврат: возвращает регистрацию обработчика [ источник ] (http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler (com.google .gwt.user.client.Window.ScrollHandler) )

Mozilla

В Mozilla есть некоторые расширения для управления полосами прокрутки, но все они не рекомендуется использовать.

  • -moz-scrollbars-none Они рекомендуют использовать overflow: hidden вместо этого.
  • -moz-scrollbars-horizontal Аналогично overflow-x
  • -moz-scrollbars-vertical Подобно overflow-y

-moz-hidden-unscrollable Работает только внутри в настройках профиля пользователя. Отключает прокрутку корневых элементов XML и отключает использование клавиш со стрелками и колесика мыши для прокрутки веб-страниц.

Дополнительные сведения о Mozilla

Насколько я знаю, это не очень полезно, но стоит отметить, что атрибут, который определяет, отображаются ли полосы прокрутки в Firefox, имеет вид (ссылка на ссылку):

  • Атрибут: полосы прокрутки.
  • Тип: nsIDOMBarProp
  • Описание: объект, который определяет, отображаются ли полосы прокрутки в окне. Этот атрибут "заменяемый" в JavaScript. Только чтение

И последнее, но не менее важное: обивка похожа на волшебство.

Как уже упоминалось ранее в некоторых других ответах, вот иллюстрация, которая достаточно понятна.

Урок истории

Scroll bars

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

Разнообразный

Объект scrollbar BarProp является дочерним по отношению к объекту window и представляет элемент пользовательского интерфейса, который содержит механизм прокрутки или некоторую аналогичную концепцию интерфейса. window.scrollbars.visible вернет true , если полосы прокрутки видны.

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

window.history.scrollRestoration можно использовать для проверки статуса восстановления прокрутки или изменения его статуса (добавление ="auto"/"manual" . Авто — значение по умолчанию. Изменение его на ручной означает, что вы, как разработчик, будете владеть любыми изменениями прокрутки, которые может потребоваться, когда пользователь просматривает историю приложения. При необходимости вы можете отслеживать положение прокрутки при отправке записей истории с помощью history.pushState ().

Дальнейшее чтение:

Примеры

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

Чтобы удалить внутреннюю полосу прокрутки div , вы можете вытащить ее из окна просмотра внешнего div , применив отрицательное поле к внутреннему div . Затем примените равные отступы к внутреннему div, чтобы содержимое оставалось на виду.

У меня это работает с простыми свойствами CSS:

Для более старых версий Firefox используйте: overflow: -moz-scrollbars-none;

Думаю, я нашел для вас обходной путь, если вам все еще интересно. Это моя первая неделя, но у меня все получилось .

Если вы ищете решение для скрытия полосы прокрутки для мобильных устройств, следуйте Ответ Петра!

Вот jsfiddle, который использует решение ниже, чтобы скрыть горизонтальную полосу прокрутки.

Он был протестирован на планшете Samsung с Android 4.0.4 (Ice Cream Sandwich, как в собственном браузере, так и в Chrome) и на iPad с iOS 6 (как в Safari, так и в Chrome).

Как уже говорили другие люди, используйте CSS overflow .

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

В дополнение к ответу Петра:

Это будет работать так же для Internet Explorer 10:

Кроссбраузерный подход к скрытию полосы прокрутки.

Он был протестирован в Edge, Chrome, Firefox и Safari.

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

Если вы хотите, чтобы прокрутка работала, прежде чем скрывать полосы прокрутки, подумайте о их стилизации. Современные версии OS X и мобильных ОС имеют полосы прокрутки, которые непрактичны для использования мышью, но довольно красивы и нейтральны.

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

В технике Джона используются три элемента:

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

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

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

Простите мой SASS; P

Тестирование

OS X — это 10.6.8. Windows — это Windows 7.

  • Firefox 32.0 Полосы прокрутки скрыты. Клавиши со стрелками не прокручиваются даже после щелчка для фокусировки, но колесо мыши и два пальца на трекпаде делают. OS X и Windows.
  • Полосы прокрутки Chrome 37.0 скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши и трекпад работают. OS X и Windows.
  • Полосы прокрутки Internet Explorer 11 скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши работает. Windows.
  • Safari 5.1.10 Полосы прокрутки скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши и трекпад работают. OS X.
  • Android 4.4.4 и 4.1.2. Полосы прокрутки скрыты. Сенсорная прокрутка работает. Пробовал в Chrome 37.0, Firefox 32.0 и HTMLViewer на 4.4.4 (что бы там ни было). В HTMLViewer размер страницы равен размеру замаскированного содержимого, и ее тоже можно прокручивать! Прокрутка приемлемо взаимодействует с масштабированием страницы.

Я просто подумал, что хочу указать всем, кто читает этот вопрос, что установка overflow: hidden (или overflow-y) в элементе body не скрывала для меня полосы прокрутки.

Мне пришлось использовать элемент html .

Скопируйте этот код CSS в код клиента, чтобы скрыть полосу прокрутки:

Я написал версию WebKit с некоторыми параметрами, такими как автоматически скрывать , маленькая версия , только-y или только-x :

Чтобы отключить вертикальную полосу прокрутки, просто добавьте overflow-y:hidden; .

Подробнее об этом: overflow.

Мой ответ будет прокручиваться, даже когда overflow:hidden; , используя jQuery:

Например, прокрутите колесико мыши по горизонтали:

Я считаю, что вы можете управлять им с помощью атрибута CSS overflow , но они имеют ограниченную поддержку браузером. Один источник сообщил, что это Internet Explorer 5 (и более поздние версии), Firefox 1.5 (и более поздние версии) и Safari 3 (и более поздние версии) — может быть, достаточно для ваших целей.

Можно ли использовать CSS, чтобы скрыть полосу прокрутки? Как бы вы это сделали?

Если вы хотите удалить вертикальные (и горизонтальные) полосы прокрутки из области просмотра браузера, добавьте:

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

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

в Google Chrome это:

но Mozilla Firefox и Internet Explorer, похоже, не работают так.

Я также пробовал это в CSS:

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

есть ли способ удалить полосу прокрутки, все еще имея возможность прокручивать всю страницу? Только с CSS или HTML, пожалуйста.

23 ответов

просто тест, который работает нормально.

JavaScript:

поскольку ширина полосы прокрутки отличается в разных браузерах, лучше обрабатывать ее с помощью JavaScript. Если вы это сделаете Element.offsetWidth — Element.clientWidth , появится точная ширина полосы прокрутки.

используя Position: absolute ,

информация:

основываясь на этом ответе, я создал простой плагин прокрутки. Надеюсь, это кому-то поможет.

легко в Webkit, с дополнительным стилем:

это работает для меня:

Примечание: В последних версиях Firefox -moz-scrollbars-none свойство является устаревшим ( ссылке ).

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

это только для браузеров webkit.. или вы можете использовать браузер css (если есть в будущем) каждый браузер может иметь другое и конкретное свойство для своих соответствующих баров

— EDIT—

для использования Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; или -ms-overflow-style: none; as на MSDN.

там нет эквивалента для FF Хотя для этого есть плагин JQuery http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

вот еще один способ, который еще не был упомянут. Это очень просто и включает только два divs и CSS. Никакой JavaScript или проприетарный CSS не требуется, и он работает во всех браузерах. Это не требует явной установки ширины контейнера, что делает его текучим.

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

пример кода для вертикальной версии:

этой ответ не включает код, поэтому вот решение от страница:

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

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

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

просто используем следующие 3 строки и ваша проблема будет решена :

где liaddshape-это имя div, где Скрул идет.

HTML:

CSS:

применить CSS соответственно.

проверить здесь (проверено в IE и FF).

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

добавление дополнения к внутреннему div , как и в принятом в настоящее время ответе, не будет работать, если по какой-то причине вы хотите использовать box-model: border-box .

что работает в обоих случаях, это увеличение ширины внутреннего div до 100% плюс ширина полосы прокрутки (если overflow: hidden на внешнем div).

в Javascript, кросс-браузер:

вот как я это делаю для горизонтальной прокрутки, только CSS и хорошо работает с фреймворками, такими как bootstrap / col-*. Ему нужно только 2 дополнительных div и родитель с шириной или максимальной шириной:

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

краткая версия для ленивых людей:

это хорошо документированное и полное решение на основе JS для проблемы полос прокрутки.

в современных браузерах, вы можете использовать wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

моя проблема: я не хочу никакого стиля в моем html, я хочу, чтобы мое тело прокручивалось без полосы прокрутки, и только вертикальная прокрутка, работающая с css-сетками для любого размера экрана.

на box-sizing value impact padding или margin solutions, они работают с box-sizing: content-box.

Мне все еще нужна директива "-moz-scrollbars-none", и, как gdoron и Mr_Green, мне пришлось скрыть полосу прокрутки. Я попробовал-moz-transform и — moz-padding-start, чтобы повлиять только на firefox, но были отзывчивые побочные эффекты, которые требовали большой работы.

Это решение работает для содержимого тела html со стилем "display: grid", и оно реагирует.

это будет на теле:

это решение divitis-esque, которое должно работать для всех браузеров.

разметка выглядит следующим образом, и должна быть внутри чего-то с относительным позиционированием (и его ширина должна быть установлена, например 400px):

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

соответствующий CSS выглядит следующим образом:

другого рода подход суховато делать overflow-y: hidden а затем вручную прокрутить элемент с чем-то вроде этого:

есть отличная статья о том, как обнаружить и справиться с onmousewheel событий в deepmikoto это блог. Это может сработать для вас, но это определенно не элегантное решение.

еще одна простая работа скрипка.

переполнение скрыто в Родительском контейнере и переполнение автоматически в дочернем контейнере. Простой.

Не уверен, что я слишком поздно на вечеринку, но добавляю

работал для меня

просто установите ширину ширины ребенка на 100%, заполнение до 15px, переполнение-x для прокрутки и переполнения: скрытый для родителя и любой ширины, которую вы хотите, он отлично работает во всех основных браузерах, включая IE Edge, за исключением IE8 и ниже.

У меня была эта проблема. Супер просто исправить. возьми два контейнера. Внутренние прокручиваемом контейнере и наружной, очевидно, дом внутренняя:

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

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

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

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

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

  • Facebook
  • Вконтакте
  • Twitter

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

::-webkit-scrollbar <
display: none;
>

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

standy

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

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

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