以编程方式在子级上设置“样式"时,iOS上的CSS Scroll Snap视觉故障 [英] CSS Scroll Snap visual glitches on iOS when programmatically setting `style` on children
问题描述
https://codepen.io/thomaslindstr_m/pen/qJLbwa
上面的漂亮骨头示例.我想淡出滚动的孩子,但是启用CSS Scroll Snap时,它在我的iPhone iOS 12.0.1上开始出现严重毛刺.
Pretty bare bones example above. I want to fade out the child I scrolled away from, but when CSS Scroll Snap is enabled, it starts glitching really bad on my iPhone iOS 12.0.1.
在此处观看视频: https://file-qacepzxlkb.now.sh/
在重新加载之前,我禁用了Scroll Snap(JavaScript仍在运行),在重新加载之后,我启用了它.
Before the reload I disabled Scroll Snap (JavaScript still running), after the reload, I enable it.
这是JavaScript:
Here's the 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中完美运行.
Any ideas on what is causing this issue, and possibly how to fix it? I realise this might require a hack, as it runs perfectly fine in Chrome 70 on macOS.
推荐答案
嘿,这种语法可以帮助您:-
hey there this syntax can help you:-
<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
}
这篇关于以编程方式在子级上设置“样式"时,iOS上的CSS Scroll Snap视觉故障的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!