按子像素滚动网页

Scroll web page by subpixels

本文关键字：网页 滚动 像素      更新时间：2023-09-26

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

我想做以下事情：

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

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

我需要这个来自动但非常缓慢地滚动网页。如果我使用全像素，滚动看起来就不平滑。

我唯一能想到的就是更改translateY，因为它接受子像素。但这会打破我的常规滚动行为，这是我非常想避免的。

编辑：我创建了两个JSFiddle来显示差异：

  • scrollTop
  • translateY

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

有什么建议吗？

显然W3C已经更改了scrollTop的规范。它现在不是整数，而是双。因此，解决方案是等待浏览器供应商实现它。

这可以做到。

一开始：

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

在滚动循环中：

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

scrollValue变量以小增量递增而不取整，但当用于设置scrollTop时，将使用整数值。

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

相关文章：