我从csstricks.com中找到了两个CSS滚动快照示例。但是,其中一个在Windows上的Chrome上不起作用。
- Example #0-作品
- Example #3-不工作
这两个例子有什么区别?为什么其中一个工作,而不是另一个?
实施例1:
.container {
flex-basis: 50%;
max-height: 100vh;
overflow-y: scroll;
border: 1px solid gray;
scroll-snap-type: y mandatory;
&.proximity {
scroll-snap-type: y proximity;
}
}
li {
border-bottom: 1px solid white;
padding: 3rem;
font-size: 1.4rem;
color: rgba(white, .5);
background: lightgray;
text-align: center;
scroll-snap-align: start;
display: flex;
flex-flow: column;
justify-content: center;
}
字符串
实施例2:
body {
font-family: sans-serif;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
section {
border-bottom: 1px solid white;
padding: 1rem;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}
型
编辑:感谢Kaiido解决这个问题。作为一个我怀疑它也解决了问题,我有一个项目,我一直在工作。我已经给www.example.com发了一封电子邮件csstricks.com,通知他们这个错误。
1条答案
按热度按时间mitkmikd1#
因为默认情况下
<body>
不滚动,所以<html>
滚动。将选择器更改为
:root
,它将在Chrome中工作。不过为了安全起见,您最好定义自己的滚动区域,因为旧的浏览器确实使用
<body>
作为scrollingElement
。