Как скрыть полосу прокрутки css но оставить прокрутку
Перейти к содержимому

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

  • автор:

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

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выше приведенный пример и немного его изменим, а именно. добавим к » overflow » английскую букву «y», что будет означать прокрутку по вертикали «overflow-y«:

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

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

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

Как видите на примере, прокрутка скрыта/удалена по вертикали:

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

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

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

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

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

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

Выше приведенный пример, в котором мы изменим вертикальную прокрутку «overflow-y» на горизонтальную » overflow-x «:

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

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

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

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

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

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

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

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

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

Давайте скроем скролл, но прокрутку оставим!

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

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

class=»example»

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

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

Свойство overflow

Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).

Синтаксис

Значения

Значение Описание
hidden Скрывает то содержимое, которое вылезло за границы блока.
scroll Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет.
visible Не скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible .

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: visible; border: 1px solid red; width: 200px; >

Пример . Значение visible

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; >

Пример . Значение hidden

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

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: hidden; width: 200px; height: 40px; border: 1px solid red; >

Пример . Значение scroll

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

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: scroll; width: 400px; height: 100px; border: 1px solid red; >

Пример . Значение auto

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

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow: auto; width: 400px; height: 100px; border: 1px solid red; >

Пример . Значение auto

А теперь ограничим ширину — появится горизонтальная полоса прокрутки:

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < width: 200px; overflow: auto; height: 100px; border: 1px solid red; >

Смотрите также

  • свойство word-break ,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-wrap ,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-x ,
    которое обрезает вылезающие по горизонтали части
  • свойство overflow-y ,
    которое обрезает вылезающие по вертикали части

scrollbar — width

scrollbar — width позволяет изменить ширину полосы прокрутки.

На данный момент scrollbar — width очень слабо поддерживается браузерами (Can I Use). Сейчас свойство будет работать только в Firefox.

Если вы используете любой другой браузер, то scrollbar — width не сработает. Поэтому под каждым демо мы добавим картинку того, как это выглядит в Firefox. Также во всех демо мы зададим ползунку скроллбара белый цвет при помощи scrollbar — color , чтобы он лучше выделялся на тёмном фоне.

Пример

Скопировать ссылку «Пример» Скопировано

 html  scrollbar-width: thin;> html  scrollbar-width: thin; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У scrollbar — width есть 3 возможных значения:

  1. auto — дефолтное значение. Браузер отрисует обычный скроллбар.
  2. thin — браузер отрисует тонкий скроллбар.
  3. none — скроллбар не будет отрисован. При этом контент по прежнему можно будет прокрутить.

Вот как они выглядят рядом:

Разные значения ширины скроллбара

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

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

scroll — padding

Задаёт отступ от краёв контейнера прокрутки, внутри которых браузер старается не размещать целевые элементы.

Пример

Скопировать ссылку «Пример» Скопировано

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

 html  scroll-padding-top: 100px;> html  scroll-padding-top: 100px; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

scroll — padding задаёт отступы таким же образом как и padding и имеет такой же набор CSS-свойств для каждой из сторон:

Физические:

  • scroll — padding — top ;
  • scroll — padding — right ;
  • scroll — padding — bottom ;
  • scroll — padding — left .

Логические:

  • scroll — padding — block — start ;
  • scroll — padding — inline — start ;
  • scroll — padding — block — end ;
  • scroll — padding — inline — end .

Горизонтальные отступы не влияют на вертикальную прокрутку, и наоборот.

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Переход по якорной ссылке (как и scroll Into View ) говорит браузеру прокрутить контейнер так, чтобы целевой элемент попал в скроллпорт. По умолчанию, браузер домотает до начала блока, тем самым верхняя грань блока будет совпадать со скроллпортом.

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

  • Целевые элементы прилипают к верху экрана, им не хватает отступа.
  • Фиксированные к верху экрана элементы перекрывают целевой элемент.

scroll — padding решает эти проблемы, никак не изменяя макет страницы. Его значения сокращают скроллпорт, создавая оптимальную для показа контента область. В ней браузер старается размещать целевые блоки. Высота этой области будет использоваться при выполнении операций постраничной прокрутки (например, при нажатии PgDown ).

Свойство не изменяет макет страницы. Если вы добавите селектору html CSS-правило scroll — padding — top : 100px , то отступ в 100 пикселей сверху не появится. Свойство влияет только на расчёты положения прокрутки.

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

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