CSS快照滚动工作仅需要什么? [英] What are the bare necessities for CSS snap scroll to work?
问题描述
我一直在尝试实现一个超级简单的水平快照滚动(如此处所示: https://css-tricks.com/practical-css-scroll-snapping ),但我一直在失败.我可能在这里搜索了所有问题和答案,但没有帮助.
I've been trying to implement a super simple horizontal snap scroll (as shown here: https://css-tricks.com/practical-css-scroll-snapping ) yet I am consistently failing at that. I've probably searched through all the questions and answers here but none was of help.
我的代码非常简单,我只在父级上声明 scroll-snap-type:y必选;
,在父类上声明 scroll-snap-align:center;
孩子.而且我非常确定这不是浏览器问题(因为我已经在许多不同的浏览器中进行过尝试).我在这里想念什么?还是我不明白?
My code is very simple, I am only declaring scroll-snap-type: y mandatory;
on the parent and scroll-snap-align: center;
on the child. And I am pretty sure it's not a browser issue (since I've tried it with many different browsers). What am I missing here? Or what do I not understand?
这是我的(无效的)CodePen: https://codepen.io/anon/pen/XyNNGY
Here's my (not working) CodePen: https://codepen.io/anon/pen/XyNNGY
html:
<div class='parent'>
<div class='child'>Section 1</div>
<div class='child two'>Section 2</div>
<div class='child'>Section 3</div>
</div>
css:
body {
margin: 0;
}
.parent {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: center;
width: 100vw;
height: 100vh;
background-color: pink;
}
.two {
background-color: crimson;
}
已经感谢一百万.
推荐答案
您指定为滚动捕捉容器的元素必须是滚动条附加到的元素.在您的情况下,父元素没有滚动条-滚动条属于视口,而父元素超出视口的大小而未生成自己的滚动条.因此,应该将 scroll-snap-type
属性应用于 body
(或 html
),而不是父项:
The element you designate as the scroll snap container needs to be the one that the scrollbar is attached to. In your case, the parent element doesn't have a scrollbar — the scrollbar belongs to the viewport and the parent is extending past the size of the viewport without generating its own scrollbar. The scroll-snap-type
property should therefore be applied to body
(or html
), not the parent:
body {
margin: 0;
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: center;
width: 100vw;
height: 100vh;
background-color: pink;
}
.two {
background-color: crimson;
}
<div class='parent'>
<div class='child'>Section 1</div>
<div class='child two'>Section 2</div>
<div class='child'>Section 3</div>
</div>
这篇关于CSS快照滚动工作仅需要什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!