Javascript 当以编程方式在子对象上设置“样式”时,iOS上的CSS滚动捕捉会出现视觉故障
上面的例子非常简单我想淡出我滚动离开的孩子,但是当CSS Scroll Snap启用时,它在我的iPhone iOS 12.0.1上开始出现非常严重的故障 请参见此处的视频: 在重新加载之前,我禁用了Scroll Snap(JavaScript仍在运行),在重新加载之后,我启用了它 下面是JavaScript:Javascript 当以编程方式在子对象上设置“样式”时,iOS上的CSS滚动捕捉会出现视觉故障,javascript,ios,css,mobile-safari,scroll-snap-points,Javascript,Ios,Css,Mobile Safari,Scroll Snap Points,上面的例子非常简单我想淡出我滚动离开的孩子,但是当CSS Scroll Snap启用时,它在我的iPhone iOS 12.0.1上开始出现非常严重的故障 请参见此处的视频: 在重新加载之前,我禁用了Scroll Snap(JavaScript仍在运行),在重新加载之后,我启用了它 下面是JavaScript: const windowWidth = window.innerWidth; const viewsElement = document.querySelector('.views')
const windowWidth = window.innerWidth;
const viewsElement = document.querySelector('.views');
const firstViewContainer = viewsElement.querySelector('.container');
function scrollHandler(event) {
const {scrollLeft} = viewsElement;
const opacity = 1 - ((scrollLeft / windowWidth) / 1.5);
firstViewContainer.style = `opacity:${opacity};`;
}
viewsElement.addEventListener('scroll', scrollHandler, {passive: true});
CSS摘录:
.views {
overflow: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-snap-stop: always;
}
.view {
/* NOTE remove to see that this issue is related to scroll snap */
scroll-snap-align: start;
}
关于是什么导致了这个问题,以及可能如何解决这个问题,有什么想法吗?我意识到这可能需要一次破解,因为它在macOS上的Chrome 70中运行得非常好。嘿,这个语法可以帮助你:-
<style>
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
</style>
<div id="gallery">
<img src="#">
<img src="#">
<img src="#">
</div>
1.即使在安卓系统上,“无人看管”滚动动作(手指不动到底的短刷手势)也会导致闪烁。我想限制scroll事件处理程序可以帮助最小化这种影响。2.我没有运气让快照滚动在iOS上工作,而不管它对浏览器的影响如何。您是否尝试过完全删除JS并查看快照滚动是否在iOS中工作?MDN声明,在使用了一些技巧后的快照滚动应该可以在任何现代浏览器上使用,并且在公众中有很多文章都说明了这一点。。。但这对我从来都不起作用,我也有同样的问题。你找到解决办法了吗@thomaslindstr_m?@Simon演示不适合你?CSS滚动捕捉效果很好,没有JS的副作用。@JeanRegisser No.还没有解决方案。我提交了文件。我正在做一件非常类似的事情,我注意到我的容器的
scrollLeft
每两次滚动事件Hitsorry就会返回到零,这并不能修复错误。
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}