Question

我正在尝试通过基于滚动位置更改两个图像的上边距来定位两个图像。边距也有最大值。

一切正常，但是我在控制台上发出警告，说此解决方案可能会在具有异步滚动功能的浏览器中引起抖动的滚动效果。

我的第一个问题是，我应该为此担心吗？另外，这实际上是我使用JavaScript的前几行，而且我不确定此解决方案是否足够好，因此请多多指教。看起来太简单了，我感觉好像有一个陷阱。

我可以通过在图像中添加类并在CSS中设置边距来做到这一点，但是我想这会花费更长的时间。我正在尝试使用js和CSS网格严格执行此操作，只是为了学习使用有限的工具解决问题。

图像位于div（网格单元格）中。

window.addEventListener("scroll", function () {
  myMargin = 0.011 * window.scrollY;
  if (myMargin < 3.4) {   //max margin is 3.4% for myImg1
    myImg1.style.marginTop = animMargin + "%";
    myImg2.style.marginTop = animMargin / 2.7 + "%";  //myImg2 moves on a different scale
  } else {
    myImg1.style.marginTop = "3.4%";   //when the max value reached the margin is fixed
    myImg2.style.marginTop = "1.25%";
  }
});

Answer 1

滚动处理程序可能会很费力，并且会给页面带来性能压力，因为它们触发的次数远远超过处理程序实际需要的次数。滚动时最终会导致断断续续/滞后，因为浏览器可能需要重绘以响应您的处理程序。

一种常见的技术是限制或降低处理程序。

油门：

每x毫秒最多只能调用一次func。

撤消：

延迟调用func，直到自上次调用反跳功能以来的x毫秒后为止。

您收到的警告实际上很好，但是您可以从使用限制的回调中受益，并将等待时间增加到最适合您的需要的时间-因此调用它的次数最少，以便为您工作

使用lodash throttle

进行演示

// only call the handler once every 200ms
const throttledScroll = _.throttle(() => {
  console.info('throttled', window.scrollY);
}, 200);

window.addEventListener('scroll', throttledScroll);

html,
body {
  height: 300vh;
}

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

滚动项的位置会发出有关异步滚动的警告

1 个答案: