Chrome(Windows)中潜在的CSS滚动捕捉错误.两个例子，只有一个工作.为什么? [英] Potential CSS Scroll Snap bug in Chrome (Windows). Two examples, only one work. Why?
本文介绍了Chrome(Windows)中潜在的CSS滚动捕捉错误.两个例子，只有一个工作.为什么?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是 csstricks.com 中的两个CSS滚动快照示例.
Here are two CSS scroll-snaps examples from csstricks.com
- Example #0 works on Chrome on Windows
- Example #3 does not work
为什么其中一个起作用，而另一个却不起作用；两者有什么区别?
Why does one of them work, and not the other; what is the difference between the two?
示例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;
}
推荐答案
由于默认情况下<body>不会滚动，而<html>则会滚动.
将选择器更改为:root，它将在Chrome中运行.
Because by default the <body> doesn't scroll, <html> does.
Change the selector to :root and it will work in Chrome.
为了安全起见，最好定义自己的滚动区域，因为较旧的浏览器确实将<body>用作scrollingElement.
Though to be safe you'd be better defining your own scrolling area since older browsers were indeed using <body> as scrollingElement.
这篇关于Chrome(Windows)中潜在的CSS滚动捕捉错误.两个例子，只有一个工作.为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
