Как скрыть полосу прокрутки css

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

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

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

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

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

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

обновление: я имел в виду скрытый, извините, только что проснулся 🙂

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

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

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

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

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

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

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

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

Да вроде ..

Когда вы задаете вопрос: "Можно ли каким-либо образом удалить полосы прокрутки браузера, а не просто скрыть или скрыть их", все скажут: "Невозможно", поскольку невозможно удалить полосы прокрутки во всех браузерах совместимым и кросс-совместимым способом, а затем есть целый аргумент юзабилити.

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

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

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

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

Internet Explorer 5.5+

* Эти свойства никогда не были частью спецификации CSS, и при этом они никогда не были одобрены или префикс поставщика, но они работают в Internet Explorer и Konqueror. Они также могут быть установлены локально в таблице стилей пользователя для каждого приложения. В IE вы найдете его на вкладке "Доступность", в Konqueror на вкладке "Стили".

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

Более подробная информация об Internet Explorer

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

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

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

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
public static 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 Они рекомендуют использовать переполнение: скрыто вместо этого.
  • -moz-scrollbars-horizontal Похож на overflow-x
  • -moz-scrollbars-vertical Похож на overflow-y

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

Более подробная информация о Mozilla

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

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

И последнее, но не менее важное, отступление похоже на магию.

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

Урок истории

Scrollbars

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Да вроде ..

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

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

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

Создать div с скрытым переполнением. Определите, когда пользователь пытается прокрутить, но не может, потому что мы отключили возможность браузеров прокручивать с переполнением: скрыто . и вместо этого перемещаем содержимое вверх, используя 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 Presentation отвечает за отображение полос прокрутки.

WebKit

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

Введите описание изображения здесь

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

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

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

Более подробная информация о Chrome

addWindowScrollHandler общедоступная статическая регистрация обработчика addWindowScrollHandler (обработчик Window.ScrollHandler)

Добавляет обработчик Window.ScrollEvent Параметры: handler — обработчик Returns: возвращает регистрацию обработчика [ source ] ( 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 Они рекомендуют использовать переполнение: скрыто вместо этого.
  • -moz-scrollbars-horizontal Похоже на переполнение-х
  • -moz-scrollbars-vertical Похоже на переполнение-у

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

Более подробная информация о Mozilla

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

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

И последнее, но не менее важное, отступление похоже на магию.

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

Урок истории

Полосы прокрутки

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

Разное

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

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

Как скрыть полосу прокрутки css

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

Перейдите с переполнением

CSS Overflow — это свойство, которое управляет переполнением элемента блока, переполнение содержимого вызывает создание полос прокрутки. Существует также Overflow-X и Overflow-Y, оба могут использоваться для удаления полос прокрутки, в зависимости от того, какой из них вы хотите удалить.

Во-первых, доступными значениями для этих свойств являются некоторые варианты:

Видимый: это отображает переполняющее содержимое за пределами родителей;
Скрытый: скроет переполненный контент, не переустанавливая его;
Прокрутка: применяет полосы прокрутки к элементу — переполнение или нет;
Авто: применяется горизонтальная, вертикальная или обе полосы прокрутки;

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

div#tresamikas <
height:200px;
width:300px;
overflow:hidden;
border:1px solid black;
padding: 10px;
>

div#odsaxtimas <
height:200px;
width:326px;
overflow:auto;
>

Здесь самостоятельно задаем по описанию.

Также не нужно исключать:

При помощи CSS

/* фф (свойство больше не работает, других способов тоже нет&#41;*/
.element

Скрытие вертикальных полос прокрутки с помощью чистого CSS в Chrome, IE (6+), Firefox, Opera и Safar.

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

Итак, предварительное исследование показало следующее:

1. Существует правило CSS, которое может скрывать полосы прокрутки в браузерах на основе Webkit (Chrome и Safari).

2. Существует правило CSS, которое может скрывать полосы прокрутки в IE 10+. Это правило:

3. Раньше было правило CSS , которые могли бы скрыть полосы прокрутки в Firefox, но с тех пор он считается устаревшим.

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

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

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

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

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

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

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