каким образом можно убрать полосу прокрутки элемента по вертикали в html

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

Как можно спрятать полосу прокрутки, но в то же время иметь возможность скроллить блок? Нужно реализовать что-то похожее на прокрутку диалогов в соцсетях. Я так понимаю, overflow здесь не поможет

Если реально, то только css

4 ответа 4

Можно сделать такой фокус с overflow:hidden и overflow:auto

Работает во всех браузерах

В хроме можно селектором ::-webkit-scrollbar

Я раньше отвечал уже на такой вопрос и по этому пример уже готовый

jQuery в этом случае отвечает за синхронизацию прокрутки

Вариант без синхронизации

Для десктопных браузеров можно вот так:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.11.40730

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

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

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

18 ответов

Set overflow: hidden; тега body вот так:

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

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

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

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

для полноты, это работает для webkit:

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

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

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

Да, вроде того..

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

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

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

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

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

Internet Explorer 5.5+

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

С IE8 эти свойства были поставщиком с префиксом Microsoft, но были до сих пор не одобрен W3C.

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

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

в WebKit

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

они могут быть объединены с дополнительными псевдо-селекторами:

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

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

addWindowScrollHandler
публичная статическая HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)

Mozilla

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

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

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

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

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

урок истории

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

Источник

Полосы прокрутки: CSS свойство overflow, тонкости.

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

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

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

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

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

Вот как будет выглядеть исправленный вариант:

Источник

Как скрыть прокрутку. Способы, примеры

Подробно о скрытии прокрутки на странице:

Скрываем всю прокрутку!

Поэтому. просто возьмем пример с той страницы и будем тренироваться удалять/скрывать прокрутку на этом примере:

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

Как скрыть прокрутку всю?

Для того, чтобы скрыть прокрутку нам нужно в стилях прописать :

Результат скрытия прокрутки:

Возьмем выше приведенный пример с прокрутку и удалим прокрутку полностью:

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

Как скрыть Вертикальную прокрутку?

Для того, чтобы скрыть вертикальную прокрутку нам потребуется выше приведенный пример:

В стилях[ («3 способа css») добавляем скрытие прокрутки по оси «Y» :

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

Результат скрытия прокрутки по вертикали:

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

Как скрыть горизонтальную прокрутку?

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

В стили(«3 способа css») и заменяем скрытые прокрутки по оси «Y» на «X» :

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

Результат скрытия прокрутки по горизонтали:

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

как скрыть прокрутку html;

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

Допустим, что мы хотим скрыть полосу прокрутки, но чтобы прокручивать текст внтри можно было!

Давайте сделаем это!

Нам понадобится: блок, выше приведенный установим ему в стилях :

Также там добавим атрибут class

как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки

Далее добавим стили нашему классу example:

Результат скрытия прокрутки с возможностью прокрутки:

как скрыть прокрутку html,

но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки
как скрыть прокрутку html,
но оставить возможность прокрутки

Сообщение системы комментирования :

Форма пока доступна только админу. скоро все заработает. надеюсь.

Источник

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

Update! Это баг на ios, решения нету. На андроид все отлично. Спасибо. Работает самый первый вариант.

Собственно, уж очень понравилось сделать горизонтальную прокрутку как на Medium.com (на малых разрешениях), изящно. Все сделал, но есть полоса прокрутки, как сделать её невидимой?

Тот же вариант горизонтальной прокрутки на поисковике Google

Стили у блока прокрутки div :

1 ответ 1

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

jquery-ui.js

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.11.40730

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник