Блог

Главная - Вопросы по программированию - Прокрутка CSS — привязка к месту?

Прокрутка CSS — привязка к месту?

#html #css #vertical-scrolling

#HTML #css #вертикальная прокрутка

Вопрос:

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

 <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #container {
                scroll-snap-type: y mandatory;
            }
            .tile {
                height:100vh;
                width:100vw;
                scroll-snap-align: start;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div class="tile" style="background-color:red;">
        </div>
        <div class="tile" style="background-color:blue;">
        </div>
        <div class="tile" style="background-color:green;">
        </div>
        <div class="tile" style="background-color:yellow;">
        </div>
    </div>
    </body>
</html>

Однако все по-прежнему прокручивается свободно. Где я ошибаюсь? Спасибо!

Ответ №1:

Во всех примерах в MDN, которые я видел при использовании привязки прокрутки, родительский элемент всегда имеет определенную высоту и переполнение для используемого вами направления, в вашем случае y => overflow-y: scroll; . Без определенной высоты в моем тестировании привязка не будет работать.

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

 html,
body {
  height: 100vh;
  overflow: hidden;
}

#container {
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-type: y mandatory;
}

#container div {
  height: 100vh;
  scroll-snap-align: start;
} 
 <!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <style>

  </style>
</head>

<body>
  <div id="container" style="">
    <div class="tile" style="background-color:red;">
    </div>
    <div class="tile" style="background-color:blue;">
    </div>
    <div class="tile" style="background-color:green;">
    </div>
    <div class="tile" style="background-color:yellow;">
    </div>
  </div>
</body>

</html>
Метки: