javascript - 从 jQuery/JavaScript 实现滚动的替代方法

Question

我正在尝试通过使用 jQuery/JavaScript 设置 CSS3 属性来实现 div 元素的拖动滚动功能。我想出了操纵以下 css 样式参数的可能性，我想知道该选择哪一个。如下设置属性有什么区别？

• obj.style.transform = 'translate(x, y)';
• obj.style.top = x; obj.style.left = y;
• obj.scrollTop = x; obj.scrollLeft = y;

我根本不关心旧版网络浏览器。请假设我只使用最新的浏览器。兼容性不是问题。

Answer 1

使用这个：

obj.style.webkitTransform = 'translate3d(x, y, 0)'

因此，您将使用 GPU 加速，并且您的滚动将足够流畅。Transform 属性可用于所有现代浏览器的特殊供应商前缀。要更改此道具，请使用 requestAnimationFrame 或 css3 动画以实现最佳 fps。