Как добавить элементу полосу прокрутки по вертикали: overflow-y | htmlbook.ru

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

как сделать прокрутку html

Иногда требуется сделать прокрутку. Либо горизонтальную, либо вертикальную прокрутку html. Почему может не работать прокрутка?

Подробно о прокрутке в html

Прокрутка «overflow: auto»

За вывод полосы прокрутки отвечает свойство «overflow».

Свойство overflow может принимать несколько значений:

В браузере — как можно увидеть все значения прокрутки?

нажимаем исследовать элемент добавляем свойство overflow и далее можно перебирать.

В браузере — как можно увидеть все значения прокрутки?

Прокрутка «overflow: auto»

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

Создаем блок div с текстом и стилями(«3 способа css»):

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

Для прокрутки ставим «overflow: auto»:

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

как сделать прокрутку html — overflow: auto

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

Как видим. при использовании «overflow: auto» произошел вывод только вертикальной прокрутки.

Из-за того, что по горизонтали, внутренний размер блока не превышен его внешнего размера!

Перейдем ко второму примеру прокрутки:

Прокрутка «overflow: scroll»

В принципе, по поведению scroll и auto похожи. вы можете потренироваться. заменить scroll на auto и обратно.

Зададим нашему блоку размер «width: 200px;»

Внутри него сделаем второй блок, который будет больше нашего выше приведенного размера «width: 500px;»

И для примера прокрутки используем «overflow: scroll;»

Разместим приведенный код прокрутки ниже:

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

как сделать прокрутку html — overflow: overflow: scroll;

Результат использования прокрутки «overflow: scroll;»

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

Использовать горизонтальную или вертикальную прокрутку

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

Либо только вертикальную прокрутку:

Разберем пример выводи одного типа прокрутки.

Соответственно в зависимости от ваших потребностей меняем горизонтальную прокрутку букв «x» либо вертикальную прокрутку букв «y»

<div>

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

Пример только одной прокрутки — горизонтальной:

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

как сделать прокрутку html — overflow: overflow-y: hidden; overflow-x: scroll;

Результат вывода — только горизонтальная прокрутка

В приведенном примере мы наблюдаем только одну прокрутку — горизонатльную!

Как создать div блок с прокруткой?

1. Что такое overflow в CSS?
2. Свойства и значения overflow
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow

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

overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Свойства и значения overflow

visible — отображается все содержание элемента, даже за пределами установленной ширины.
hidden — отображается только область внутри элемента, остальное скрыто.
scroll — принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto — автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Принудительная установка прокрутки в блоке CSS

Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Пример div блока с прокруткой

Код HTML и CSS

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

Демонстрация Скачать исходники
Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

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

Имеется выпадающее меню. При ховере на любом из пунктов меню, если на одном уровне пунктов меню много и они заходят внизу за экран, то должна появиться вертикальная прокрутка. https://jsfiddle.net/vosh67kh/3/
А сейчас при ховере появляется горизонтальная прокрутка
P.S. добавлю, что все нижеприведённые ответы не соответствуют вопросу

P.S. добавлю, что overflow-x:hidden; не решает эту проблему
т.е. выпадающее меню должно быть на всех уровнях, а сейчас вместо выпадающего меню появляется гор-я прокрутка

Что бы скролл появлялся когда:

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

Подправьте .nav ul на

Чтобы убрать горизонтальный скролл в #top-menu li li a добавьте:

P.S.: для точной настройки выпадающего списка поиграйте с .nav ul

Нет, сделать это только на css невозможно по следующей причине.

Если меню третьего уровня будет позиционироваться относительно элемента

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

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

Рекомендую пойти по второму пути и при помощи js обеспечить синхронность передвижения.

Хотя можно попытаться найти какой-нибудь хак для webkit’ов, в которых можно стилизовать полосу прокрутки. Но в других браузерах точно не взлетит.

Вертикальная прокрутка у Вас по сути уже есть. Если Вам требуется только вертикальная прокрутка, а горизонтальная должна отсутствовать, попробуйте явно задать у селектора . nav ul атрибут overflow-x как hidden .

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

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

Как добавить элементу полосу прокрутки по вертикали

Making a div vertically scrollable using CSS

Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;. It will make vertical and horizontal scrollable bar and the auto will make only vertically scrollable bar.

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

Изучаем overflow hidden CSS

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

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

Значения свойства overflow

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

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

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

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

Теперь осмотрим, как каждое из этих значений влияет на контент.

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

Ширина и высота элемента div установлена на 200px и 100px . Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

hidden

Overflow: hidden CSS скрывает содержимое, выходящее за пределы контейнера.

scroll

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

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

Это значение похоже на значение scroll , но полосы прокрутки добавляются только при необходимости. В приведенной ниже демо-версии overflow: auto добавляет вертикальную полосу прокрутки к первому блоку, содержимое которого превышает его высоту блока. А во втором случае полосы прокрутки не добавляются.

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

overflow-x и overflow-y

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

Если ширина внешнего блока составляет 200 пикселей , а внутреннего — 250 пикселей , то задав для внешнего блока overflow-x: auto , мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей , а высота внутреннего блока — 150 пикселей , то overflow-y: auto добавляет вертикальную полосу прокрутки.

Разбивка длинного текста

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

Если мы укажем word-wrap: break-word , выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden .

Поддержка браузерами

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

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

CSS — overflow

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

Свойство overflow имеет следующие значения:

• visible видимый — По умолчанию. Переполнение не обрезается. Оно отображается за элементом блока
• hidden скрытый — Переполнение обрезается и остальной контент не будет видим
• scroll прокручиваемый — Переполнение обрезается и добавляются полоса прокрутки, чтобы увидеть остальное содержимое
• auto автоматический — Если переполнение обрезается, полоса прокрутки должна быть добавлены, чтобы увидеть остальное содержимое

Примечание: Свойство overflow работает только для блочных элементов с заданной высотой.

Примечание: В OS X Lion (в Mac), полосы прокрутки по умолчанию скрыты и показываются только, когда используется overflow:scroll .

Переполнение видимое

Значение visible по умолчанию, означает, что переполнение не обрезается и просматривается за пределами элемента:

Пример

Переполнение скрытое

Значение hidden обрезает переполнение и скрывает остальное содержимое:

Пример

Переполнение с прокруткой

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

Пример

Переполнение автоматическое

Значение auto аналогично scroll , только добавляет полосы прокрутки, когда Вам это необходимо:

Пример

Переполнение по горизонтали и вертикали

Свойства overflow-x и overflow-y может изменить переполнение содержимого по горизонтали или по вертикали (одновременно):

Свойство overflow-x указывает, что делать с левый/правый краями содержания.
Свойство overflow-y указывает, что делать с верхним/нижним краями содержания.

Как добавить элементу полосу прокрутки по вертикали

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

Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:

Рассмотрим применение двух значений:

Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow :

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

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

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

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

Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5 CSS3 IE Cr Op Sa Fx

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

Скрытие полосы прокрутки на 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, связанные с настройкой полосы прокрутки:

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

• :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. Только чтение

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

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

Урок истории

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

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

Объект 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, чтобы скрыть полосу прокрутки? Как бы вы это сделали?

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

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

Для того, чтобы скрыть/удалить прокрутку нам потребуется

Первым шагом сделать эту самую прокрутку, чтобы потом её скрыть!

Нам потребуется код с той страницы, в одном коде и html и css:

У нас получилась прокрутка/скролл — который мы с вами сейчас удалим! На примере вы видите два вида прокрутки — горизонтальную + вертикальную:

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

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

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

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

Удаляем /скрываем прокрутку

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

Возьмем выше приведенный пример с прокруткой и удалим прокрутку полностью. Если вы посмотрите на приведенный код, то увидите. что вместо » overflow: scroll; » у нас » overflow: hidden «:

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

Тот код, который вы увидели выше, поместим его прямо здесь, как видите, что у данного блока и горизонтальная прокрутка и вертикальная удалены. Но здесь есть некоторое неудобство. теперь вы не сможете посмотреть контент, который скрыт за пределами блока:

Полоса прокрутки в таблице HTML | Узнайте, как создать полосу прокрутки в HTML-таблице?

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

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

Когда содержимое текстового поля слишком велико, значит, оно не помещается в нем, поле прокрутки HTML обеспечит увеличение полосы прокрутки поля. Некоторые приложения, такие как мобильные приложения, используют поля прокрутки, они будут отображать их функции, но на большом мобильном экране будут отображаться хорошо. Совместимость с некоторыми маленькими мобильными экранами не будет отображаться на экране, т. Е.) Функция приложения, которая должна использоваться в поле прокрутки. . В веб-приложениях, которые будут использоваться на экране браузера, необходимы некоторые плагины для отображения некоторых функций. Предположим, мы хотим добавить параметр полосы прокрутки в HTML, использовать параметр «переполнение» и установить его как автоматически включенный для добавления как горизонтальных, так и вертикальных полос прокрутки. Если мы хотим добавить вертикальную полосу в Html, добавьте строку «overflow-y» в файлы.

• Синтаксис файлов CSS для полос прокрутки

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

 {
Overflow-x:scroll;//добавить опцию горизонтальной полосы в html
Переполнение-у: прокрутка; //добавляем вертикальную черту в html
} 

• Синтаксис файла HTML для полос прокрутки

С помощью тега