Когда у меня есть контейнер .sections с несколькими элементами .section внутри и настройка scroll-snap, он будет работать ONLY , если я задаю секции фиксированную высоту 100vh. Без высоты функция прокрутки не будет работать. Это нормально, за исключением того, что без фиксированной высоты scrollTo работает правильно, а когда я добавляю высоту к сечению, scrollTo больше не работает.
Вот пример. Вы можете закомментировать строку height: 100vh; в .section CSS и увидеть, что нажатие в любом месте приведет к прокрутке до раздела № 3, но при включенной высоте оно не будет прокручиваться.
I попытался console.log положение, в котором он прокручивается, и это правильно, но прокрутка фактически никогда не происходит. Любые идеи о том, почему это не ведет себя так, как я хотел бы?
ПРИМЕЧАНИЕ: я вижу это поведение в последней Chrome. Я не проверял другой браузер.
// Click on document to scroll to section 3
document.body.onclick = function() {
console.log('SCROLLING...');
const el = document.getElementById('s3');
const pos = el.getBoundingClientRect();
window.scrollTo(0, pos.top);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.sections {
overflow-y: scroll;
scroll-snap-type: y mandatory;
/**
* Adding the below line breaks scrollto, removing
* it breaks scroll-snap....
*/
height: 100vh;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
border: 5px solid deeppink;
font-size: 30px;
font-weight: bold;
scroll-snap-align: center;
}
<html>
<body>
<div class="sections">
<div class="section" id="s1">SECTION 1</div>
<div class="section" id="s2">SECTION 2</div>
<div class="section" id="s3">SECTION 3</div>
<div class="section" id="s4">SECTION 4</div>
<div class="section" id="s5">SECTION 5</div>
</div>
</body>
</html>