html5 - 为什么很多移动端的HTML UI,在滚动时都用transform属性而不是用传统的滚动条?
巴扎黑
巴扎黑 2017-04-17 11:19:43
[HTML讨论组]

例如 sencha touch, mobiscroll

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

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

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

巴扎黑
巴扎黑

全部回复(5)
阿神

我记得移动端是不支持原生滚动的,也就是不支持overflow: scroll; 于是才有了iscroll这样的解决框架。不过最新的Safari开始支持了。具体你搜下到处都是,不列举了。

怪我咯

關鍵不在硬件加速,而在於是否 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.

使用 margin/top 修改會觸發 reflow,拖慢速度。

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.

absolute 和 fixed 的元素的 reflow 不會牽動整體,但依舊不如 transform 只需要 repaint。

而 translate 和 translate3d 的區別則在於硬件加速。

參考資料:https://dev.opera.com/articles/efficient-javascript/?page=3#reflow

PHP中文网

translate3d能开启硬件加速,提升性能。

巴扎黑

是性能问题,移动端的焦点图效果都是translate3d做的,那样运动效果更平滑,而不是一卡一卡的

大家讲道理

overflow:hidden; 很多坑。。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号