https://codepen.io/thomaslindstr_m/pen/qJLbwa
上面很简单的例子。 我想淡出我从 滚动离开的 child ,但是当启用 CSS Scroll Snap 时,它在我的 iPhone iOS 12.0.1 上开始出现非常糟糕的故障。
在此处观看视频: https://file-qacepzxlkb.now.sh/
在重新加载之前,我禁用了 Scroll Snap(JavaScript 仍在运行),在重新加载之后,我启用了它。
这是JavaScript:
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 中运行得非常好。
最佳答案
对我有帮助的是添加 overflow: hidden;
对于每个子元素。
在您的情况下,代码如下所示:
.view {
/* NOTE remove to see that this issue is related to scroll snap */
scroll-snap-align: start;
overflow: hidden;
}
关于javascript - 以编程方式在 child 上设置 `style` 时,iOS 上的 CSS Scroll Snap 视觉故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52989070/