问题
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?
Example 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;
}
Example 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;
}
回答1:
Because by default the <body> doesn't scroll, <html> does.
Change the selector to :root and it will work in Chrome.
Though to be safe you'd be better defining your own scrolling area since older browsers were indeed using <body> as scrollingElement.
来源：https://stackoverflow.com/questions/58702436/potensial-css-scroll-snap-bug-in-chrome-windows-two-examples-only-one-work