滚动溢出y的snap属性将导致页面滚动
我使用css属性卷轴式将溢出的div快照的内容放在滚动页上。
它很容易应用：
.container {
height: 400px;
overflow-y: scroll;
scroll-snap-type: mandatory;
}
.contents {
scroll-snap-align: start;
}看看Safari 11+ on桌面中的这个页面，举个例子--在页面左侧的div上滚动https://codepen.io/fionnbharra/full/PQZmav/。注意滚动完成时div是如何对齐到容器顶部的。这是意料之中的行为。
我的问题是，当我们有一个很长的页面时，它就会崩溃-- https://codepen.io/fionnbharra/full/oEbWeq/
尝试在相同的溢出div上滚动。注意页面正文如何同时滚动，这意味着很难看到原始内容滚动。
这是个虫子吗？我做错了什么吗？
回答 2
Stack Overflow用户
发布于 2018-02-07 20:11:30
这是实验技术，只是部分支持。Chrome现在不支持它(2018-02-07)。https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
你现在应该使用其他的风格。滚动链系列可以被相对定位的额外容器所取代。
https://caniuse.com/#feat=css-snappoints
浏览器通常不会实现它或部分实现。使用其他CSS样式。
顺便说一下。如果您希望确保正确支持样式，请使用caniuse.com。
Stack Overflow用户
发布于 2018-02-09 00:51:30
这似乎是Safari的做法，当它抓取div时，它将滚动事件传播到链上，导致整个窗口滚动，但考虑到这是一种实验技术，我并不感到太惊讶。解决这一问题的一种方法是在使用html滚动时将overflow元素的hidden设置为hidden，并在完成时重新设置它：
const container = document.getElementsByClassName('container')[0];
const html = document.documentElement;
let scrollTimer = -1;
let locked = false;
function lock() {
if (!locked) {
locked = true;
html.style.overflow = 'hidden';
}
}
function unlock() {
if (locked) {
locked = false;
html.style.overflow = '';
}
}
container.addEventListener('scroll', () => {
if (scrollTimer !== -1) {
clearTimeout(scrollTimer);
}
if (container.scrollTop <= 0 ||
container.scrollTop >= container.scrollHeight - container.offsetHeight) {
// if scrollbar reaches top or bottom, unlock
unlock();
} else {
lock();
// defer unlocking scroll
scrollTimer = setTimeout(unlock, 150); // consider 150ms of inactivity to be the end of a scroll
}
}, false);main {
background: #D7FCD4;
display: flex;
}
.container {
height: 400px;
flex: 1;
overflow-y: scroll;
scroll-snap-type: mandatory;
}
.contents {
display: block;
height: 100px;
margin-bottom: 10px;
width: 100%;
scroll-snap-align: start;
}
.contents:nth-child(even) {background: #B68F40}
.contents:nth-child(odd) {background: #545454}
.more-stuff {
background: linear-gradient(#30011E, #fff);
border-left: 10px solid white;
display: block;
height: 2000px;
flex: 1;
}<main>
<div class="container">
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
</div>
<div class="more-stuff">
</div>
</main>
因为到目前为止，大多数浏览器都不支持这一点，所以现在您需要在生产中使用基于JavaScript的解决方案。
https://stackoverflow.com/questions/48586470
复制相似问题
腾讯云开发者
