按子像素滚动网页

Question

是否可以使用JavaScript按子像素滚动网页？

我想做以下事情：

document.querySelector('body').scrollTop += 0.5

这不起作用，因为scrollTop将给定的数字转换为整数，这会导致截断数字的小数部分。

我需要这个才能自动滚动网页，但速度非常慢。如果我使用全像素，则滚动看起来不平滑。

我唯一能想到的是改变translateY，因为它接受子像素。但这会破坏我的常规滚动行为，这是我真正想要避免的。

修改 我创建了两个JSFiddles来显示差异：

• scrollTop
• translateY

它们以相同的速度滚动。但第一个并不顺利。但是，第二个打破了原生滚动（之后无法滚动到顶部）。我知道第二个可以通过使用像iScroll或类似的插件来修复，但如果不是绝对必要，我想避免这种情况。

有什么建议吗？

Answer 1

显然，W3C更改了scrollTop的{​​{3}}。它不是整数，而是现在的双倍。因此，解决方案是等到浏览器供应商实现它。

Answer 2

这可以。

一开始：

var scrollValue=document.querySelector('body').scrollTop;

在滚动循环中：

scrollValue+=0.5
document.querySelector('body').scrollTop =scrollValue;

scrollValue变量以小增量递增而不进行舍入，但在用于设置scrollTop时，使用整数值。

Answer 3

只需使用您自己的变量跟踪当前滚动位置。当用户更改滚动位置时，请更新变量。在计算过程中，首先更改变量，然后将其转换为浏览器的整数。

Answer 4

实施测试以查看（a）设备像素比率是否为1，或者（b）浏览器是否支持子像素scrollTop。如果是这样，那么你就完全了。如果没有，取决于像素比率（比如它是3）：

1. 将scrollTop调整为1px。申请translateY（0）。
2. 应用translateY（0.333333px）。
3. 应用translateY（0.666666px）。
4. 返回第1步。

如果滚动因任何原因而中断，请应用translateY（0）。