Настя Котова // Frontend & Node.js

This media is not supported in your browser

VIEW IN TELEGRAM

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

Свойство scroll-padding позволяет задать отступы внутри элемента, влияющие на прокрутку его содержимого.

📖 Пример:

.Container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.FixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #2d0094;
}

.Content {
  overflow-y: auto;
  scroll-padding-top: 50px;
}

Подробнее в документации

www.tgoop.com/startpoint_dev/97

272 viewsAnastasia Kotova, Oct 4, 2024 at 08:52

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

Свойство scroll-padding позволяет задать отступы внутри элемента, влияющие на прокрутку его содержимого.

📖 Пример:

.Container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.FixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #2d0094;
}

.Content {
  overflow-y: auto;
  scroll-padding-top: 50px;
}

BY Настя Котова // Frontend & Node.js