CSS 滚动 在 iOS 上以编程方式在儿童上设置"样式"时出现视觉故障

Question

https://codepen.io/thomaslindstr_m/pen/qJLbwa

上面漂亮的裸骨示例。我想淡出我滚动离开的孩子，但是当启用 CSS 滚动快照时，它在我的 iPhone iOS 12.0.1 上开始出现故障非常糟糕。

在此处观看视频：https://file-qacepzxlkb.now.sh/

在重新加载之前，我禁用了滚动快照(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中运行良好。

Answer 1

对我有帮助的是为每个子元素添加overflow: hidden;。 在您的情况下，代码如下所示：

.view {
/* NOTE remove to see that this issue is related to scroll snap */
scroll-snap-align: start;
overflow: hidden;
}

Answer 2

嘿，这个语法可以帮助你：-

<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>

CSS 帮助

if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}