Question

试图修复Safari浏览器（macOS High Sierra上的ver 12.0.2）页面滚动时的div“闪烁”，但不了解为什么会发生这种情况，我也试图通过CSS方法来解决此问题，例如transformZ(0)，webkit-backface-visibility: hidden，webkit-transform-style: preserve-3d，will-change: top，但这对您没有帮助吗？谢谢！

var scroll = document.getElementById('scroll').style;
window.onscroll = function () {
  scroll.top = middleOfScreen();
};

var raf = document.getElementById('raf').style;
requestAnimationFrame(function setRaf () {
  raf.top = middleOfScreen();
  requestAnimationFrame(setRaf);
});
  
function middleOfScreen() {
  return window.pageYOffset + window.innerHeight/2 + 'px';
}

body {
  height: 20000px;
  margin: 0;
  font-family: sans-serif;
  text-align: center;
}
div {
  width: 23%;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1em 0;
}
div:nth-child(2n) {
  background-color: rgba(0, 0, 0, 0.4);
}
#static {
  position: absolute;
  left: 0;
}
#scroll {
  position: absolute;
  left: 24%;
}
#raf {
  position: absolute;
  left: 48%;
}
#css {
  position: fixed;
  right: 0;
}

<div id=static>position:static</div>
<div id=scroll>set to top:50% onScroll</div>
<div id=raf>set to top:50% on requestAnimationFrame</div>
<div id=css>posision:fixed </div>

也 Codepen

Answer 1

为什么每次滚动事件触发时都需要置顶？似乎设置最高值会影响闪烁。如果您想以滚动方式收听并设置顶部，那么我建议使用节流阀，这样事件侦听器将只执行一次。

Safari浏览器的页面/窗口滚动中的Div“闪烁”

1 个答案: