html5 - 为什么很多移动端的HTML UI，在滚动时都用transform属性而不是用传统的滚动条？

Question

例如 sencha touch, mobiscroll

mobiscroll 在下滑滚动选择日期时都是改变 CSS

-webkit-transform: translate3d(0px, -40px, 0px);

去实现的。这样有一个效果是日期在选择的时候不会连带拖动整个 UI。除此之外还有什么好处吗？

Answer 1

I remember that the mobile terminal does not support native scrolling, that is, it does not support overflow: scroll; so there is a solution framework like isscroll. But the latest Safari starts to support it. The specifics can be found everywhere if you search, so I won’t list them here.

Answer 2

The key is not hardware acceleration, but whether to reflow.

A reflow is a more significant change. This will happen whenever the DOM tree is manipulated, whenever a style is changed that affects the layout, whenever the className property of an element is changed, or whenever the browser window size is changed.

Using margin/top modification will trigger reflow and slow down the speed.

Elements that are positioned absolutely or fixed, do not affect the layout of the main document, so if they reflow, they are the only thing that reflows. The document behind them will need to repaint to allow for any changes, but this is much less of a problem than an entire reflow.

The reflow of absolute and fixed elements will not affect the whole, but it is still not as good as transform which only requires repaint.

The difference between translate and translate3d lies in hardware acceleration.

Reference material: https://dev.opera.com/articles/efficient-javascript/?page=3#reflow

Answer 3

translate3d can enable hardware acceleration to improve performance.

Answer 4

It’s a performance issue. The focus map effects on the mobile side are all made by translate3d, so that the movement effect is smoother instead of one card after another

Answer 5

overflow:hidden; Lots of pitfalls. .