javascript - Translate3d 在文档末尾添加额外的空间

Question

我使用 transform translate3d 在页面上做了一个平滑的滚动。但有一个问题。 Translate3d 在文档末尾添加额外的空间。你可以在这里看到它:https://codepen.io/anon/pen/WEpLGE

我认为问题出在这里:

if(Math.round(currentY) !== Math.round(destY)){
  var newY = Math.round(currentY + ((destY - currentY) * 0.1));
  container.css({
    transform: 'translate3d(0, -' + newY + 'px, 0)'
  });
}

您可以看到在图像容器的末尾有一个空白区域。我该如何解决这个问题？

Answer 1

使用transform 不会导致周围的元素回流。从本质上讲，这意味着浏览器不会重新呈现包含元素的大小，即使您使用 translate3d 移动它也是如此。当涉及到影响父容器的大小时，或者文本在它们周围流动但用户看到它被翻译移动时，图像停留在它们的原始位置。

简而言之，不是增加空间。该空间是翻译后的元素在未移动的情况下将占用的空间。

This文章在“转换”部分的第三段对其进行了解释。

我不确定您要通过翻译实现什么目标。在我看来这是某种视差效果？我会删除添加转换的 if 语句，看看你是否接受。您也可以尝试 position: absolute。我可以解释为什么会这样，但是如果没有更多关于您要实现的目标的详细信息，将很难提供解决方案。

编辑:

查看代码后，您似乎想要一种平滑的滚动效果，其中图像滞后于滚动然后漂移到位。有点像在移动到最终位置的手机上滚动。

这在技术上是 2 个问题合二为一，“为什么会有额外的空间”和“我如何获得这个平滑的滚动条”。我建议您添加另一个问题，或编辑此问题以更具体地针对其中一个问题。但我会提示您如何修复它。

我的建议是更改代码，而不是添加递增的偏移量(这就是为什么最后会有空格)。但是检测到一个滚动，添加一个类，它使用 css transition 将所有内容向上移动，然后当滚动停止时删除该类，以便所有内容都向下移动。

当他们停止滚动时，这会将所有内容保留在屏幕上的原始位置，而不是像现在这样偏移。

如果您确认这一点，我会给您一些示例代码，但不会花时间进行假设。