https://codepen.io/thomaslindstr_m/pen/qJLbwa
上面漂亮的骨头例子。我想淡出滚动离开的孩子,但是启用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});
Run Code Online (Sandbox Code Playgroud)
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 …Run Code Online (Sandbox Code Playgroud)