替代实现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 prop可用于所有现代浏览器的特殊供应商前缀。 要更改此道具，请使用requestAnimationFrame或css3动画来获得最佳fps。