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

CSS: Скрыть Полосу Прокрутки.

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

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

можете ли вы помочь с Javascript/jQuery ?

2 ответа

Как скрыть вертикальную полосу прокрутки Listbox, которая присутствует внутри div. <div style=overflow-y: hidden !important; overflow-x: auto !important; Width: 650px; height:167px; > <asp:ListBox runat=server CssClass=cssLstQueries.

Мне нужно скрыть полосу прокрутки на div, который имеет overflow:scroll; включен, так что div будет прокручиваться с помощью мыши и клавиатуры, но сама полоса прокрутки не будет отображаться. есть ли способ сделать это с css или javascript — это путь?

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

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

Похожие вопросы:

Как я могу скрыть полосу прокрутки на Android Chrome / Chromium с помощью CSS/Javascript? Я пытался: document.documentElement.style.overflow = ‘hidden’; Который работает на Chrome для Windows, но.

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

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

Как скрыть вертикальную полосу прокрутки Listbox, которая присутствует внутри div. <div style=overflow-y: hidden !important; overflow-x: auto !important; Width: 650px;.

Мне нужно скрыть полосу прокрутки на div, который имеет overflow:scroll; включен, так что div будет прокручиваться с помощью мыши и клавиатуры, но сама полоса прокрутки не будет отображаться. есть.

Я использую iframe с фиксированной высотой и вертикальной полосой прокрутки. полоса прокрутки iframe появится только в том случае, если высота загруженной страницы превышает высоту iframe. Мне нужно.

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

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

Как скрыть вертикальную полосу прокрутки в windows OS при использовании набора свойств CSS overflow для прокрутки. Я могу прокручивать, но я хотел бы скрыть вертикальную полосу прокрутки. Вот мой.

CSS, чтобы скрыть полосу прокрутки от Mozilla Firefox, как мы можем скрыть ее от chrome, например:- ::-webkit-scrollbar

Пользовательские полосы прокрутки в CSS

Пользовательские полосы прокрутки в CSS

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

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

Пользовательские полосы прокрутки в CSS

Вступление

Первое, что я хочу объяснить, &#8212; это компоненты или части полосы прокрутки. Полоса прокрутки содержит дорожку и ползунок. Вот наглядное изображение, которое их показывает:

Пользовательские полосы прокрутки в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Дорожка &#8212; это основа полосы прокрутки, а ползунок &#8212; это то, что пользователь перетаскивает для прокрутки страницы или раздела.

Следует иметь в виду одну важную вещь: полоса прокрутки может работать горизонтально или вертикально, в зависимости от дизайна. Кроме того, она может измениться при работе с многоязычным веб-сайтом, который работает как слева направо (LTR), так и справа налево (RTL).

Пользовательские полосы прокрутки в CSS

Настройка дизайна долосы прокрутки

Раньше пользовательская полоса прокрутки использовалась только для webkit, поэтому, она не использовались в Firefox и IE. Сейчас, у нас есть новый синтаксис, который работает только в Firefox и упростит нам жизнь, когда он будет полностью поддерживаться. Я пройдусь по старому синтаксису Webkit, а затем по новому.

Старый синтаксис

Ширина полосы прокрутки

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

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

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

Из всех возможных значений данного свойства нас интересует значение «hidden»:

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло – скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

  1. CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
  2. Перед использованием данного приема, хорошо подумайте – нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
  3. Наиболее оправданным будет применение overflow: hidden в следующих случаях:
    • Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д. ).
    • Вывод небольших web-форм
    • Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.

    Послесловие

    Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

    Кастомизовать системные полосы прокрутки.
    На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.

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

    Преимущества:

    • Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.
    • Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

    Скрыть системные полосы прокрутки, и использовать JavaScript-эмулятор.
    Казалось бы, вполне логично: хочешь кросс-браузерности – используй JavaScript. Но в данном случае это жестокое заблуждение.

    Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

    Преимущества

    • Безграничная по глубине кастомизация.
    • Производительность эмулятора ниже производительности системной прокрутки.
    • Нет гарантий кросс-браузерности и кросс-платформности.

    Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов.

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

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