Как добавить прокрутку в html
Перейти к содержимому

Как добавить прокрутку в html

  • автор:

Как прокрутку страницы прикрепить к прокрутке конкретного блока

@Sevastopol’ Нужно прокручивать только этот блок. Основной контент на нём. Все остальные блоки можно оставить на месте. Но если им сделать position: fixed, то вся структура слетает, поэтому появилась глобальным скроллом прокручивать только этот необходимый блок.

10 мая 2021 в 15:03

Как я понял, тебе нужно стилизовать полосу прокрутки, чтобы она выглядела как основная. Для этого в браузерах на webkit можно использовать псевдоэлементы ::-webkit-scrollbar-* , в других — никак. Хотя правильное решение — использование фиксированного или абсолютного позиционирования

Как сделать прокрутку страницы в html

Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.

Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :

 class="scroll"> 
.scroll  height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > 

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

Как добавить прокрутку в html

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

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

  • auto : если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
  • hidden : отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
  • scroll : в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
  • visible : значение по умолчанию, контент отображается, даже если он выходит за границы блока

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

    Прокрутка в CSS3 .article1 < width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: auto; >.article2  

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

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

Создание прокрутки в CSS

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

overflow-x: auto; overflow-y: hidden;

scroll-behavior

scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.

Юзер-агенты могут игнорировать это свойство.

Начальное значение auto
Применяется к прокручиваемые блоки
Наследуется нет
Обработка значения как указано
Animation type Not animatable

Синтаксис

/* Ключевые слова */ scroll-behavior: auto; scroll-behavior: smooth; /* Глобальные значения */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; 

Значения

Стандартное поведение прокрутки без эффекта плавности.

Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.

Синтаксис

scroll-behavior =
auto |
smooth

Пример

HTML

nav> a href="#page-1">1a> a href="#page-2">2a> a href="#page-3">3a> nav> scroll-container> scroll-page id="page-1">1scroll-page> scroll-page id="page-2">2scroll-page> scroll-page id="page-3">3scroll-page> scroll-container> 

CSS

a  display: inline-block; width: 50px; text-decoration: none; > nav, scroll-container  display: block; margin: 0 auto; text-align: center; > nav  width: 339px; padding: 5px; border: 1px solid black; > scroll-container  display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; > scroll-page  display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; > 

Результат

Характеристики

Specification
CSS Overflow Module Level 3
# smooth-scrolling

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

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