15

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});

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 中运行得非常好。

4

2 回答 2

0

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

.view {
  /* NOTE remove to see that this issue is related to scroll snap */
  scroll-snap-align: start;
  overflow: hidden;
}
于 2022-02-14T11:54:18.840 回答
-3

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

<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
}
于 2021-02-23T09:17:36.027 回答