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文章在＆＃34;变换＆＃34;的第三段中解释了它。部分。

我不确定您尝试通过翻译实现的目标。它看起来像是它的某种视差效应？我删除了添加了转换的if语句，看看你是否还好。您也可以尝试position: absolute。我可以解释为什么会发生这种情况，但是没有更详细的信息说明你正在努力实现的目标很难帮助解决方案。

编辑：

在查看代码之后，看起来您正在寻找平滑的滚动效果，其中图像滞后于滚动然后漂移到位。有点像在手机上滚动，它会漂移到最终位置。

这在技术上是两个问题中的一个，＆＃34;为什么有额外的空间＆＃34;和＆＃34;我如何得到这个平滑的滚动＆＃34;。我建议您添加另一个问题，或者编辑此问题以使其更具体。但是我会告诉你如何修复它。

我的建议是更改代码，而不是添加递增偏移量（这就是为什么你最后得到的空间）。但是检测一个滚动，添加一个用css transition来移动所有内容的类，然后当滚动停止删除该类时，所有内容都会向下移动。

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

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

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

1 个答案:

编辑：