小编tho*_*r_m的帖子

以编程方式在子级上设置“样式”时,iOS上的CSS Scroll Snap视觉故障

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)

javascript css mobile-safari ios scroll-snap-points

9
推荐指数
1
解决办法
638
查看次数

标签 统计

css ×1

ios ×1

javascript ×1

mobile-safari ×1

scroll-snap-points ×1