移动web之滚动篇

发布时间:2021-09-25 16:13:45

知识点1:移动web滚动问题


在移动端,使用滚动来处理业务逻辑的情况有很多,例如列表的滚动加载数据,下拉刷新等等都需要利用滚动的相关知识,但是滚动事件在不同的移动端机型却又有不同的表现,下面就来一一总结一下。




  1. 滚动事件:即onscroll事件,形成原因通俗解释是当子元素的高度超过父元素的高度时且父元素的高度时定值window除外,就会形成滚动条,滚动分为两种:局部滚动和body滚动。
  2. onscroll方法: 一般情况下当我们需要监听一个滚动事件时通常会用到onscroll方法来监听滚动事件的触发。 如果在浏览器上调试这个方法在浏览器上很好用,但是如果跑在手机端就没有想象中的效果了。
  3. body滚动:在移动端如果使用body滚动,意思就是页面的高度由内容自动撑大,body自然形成滚动条,这时我们监听window.onscroll,发现onscroll并没有实时触发,只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发,采用了wk内核的webview除外。
    ?body滚动
    局部滚动
  4. 局部滚动:在移动端如果使用局部滚动,意思就是我们的滚动在一个固定宽高的div内触发,将该div设置成overflow:scroll/auto;来形成div内部的滚动,这时我们监听div的onscroll发现触发的时机区分android和ios两种情况,具体可以看下面表格:
  5. 不同机型onscroll事件触发情况:

    ? body滚动 局部滚动
    ios 不能实时触发 不能实时触发
    android 实时触发 实时触发
    ios wkwebview内核 实时触发 实时触发
  6. wkwebview内核:这里说明一下关于ios的wkwebview内核是ios从ios8开始提供的新型webview内核,和之前的uiwebview相比,性能要好,具体大家可以自行查看关于wkwebview的相关概念。
  7. body滚动和局部滚动demo:这里我需要指出的是在采用wkwebview内核的页面中scroll是可以实时触发的,如果使用的是原本的uiwebview则不能够实时触发,手q目前使用的是uiwebview而新版微信使用的是wkwebview,大家可以分别使用来尝试一下下面的demo:
    局部滚动
    body滚动
    分别用ios手q和微信和android手q体验会有不同的结果。

知识点2:关于模拟滚动

?


  1. 正常的滚动:我们*时使用的scroll,包括上面讲的滚动都属于正常滚动,利用浏览器自身提供的滚动条来实现滚动,底层是由浏览器内核控制。
  2. 模拟滚动:最典型的例子就是iscroll(AlloyTouch)了,原理一般有两种:
    1).?监听滚动元素的touchmove事件,当事件触发时修改元素的transform属性来实现元素的位移,让手指离开时触发touchend事件,然后采用requestanimationframe来在一个线型函数下不断的修改元素的transform来实现手指离开时的一段惯性滚动距离。
    2).监听滚动元素的touchmove事件,当事件触发时修改元素的transform属性来实现元素的位移,让手指离开时触发touchend事件,然后给元素一个css的animation,并设置好duration和function来实现手指离开时的一段惯性距离。
  3. 方案区别:这两种方案对比起来各有好处,第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值,并且滚动的回调函数onscroll在滚动的阶段都会触发。
  4. 第二种方案相比第一种要劣势一些,区别在于手指离开时,采用的时css的animation来实现惯性滚动,所以无法直接触发惯性滚动过程中的onscroll事件,只有在animation结束时才可以借助animationend来获取到事件,当然也有一种方法可以实时获取滚动事件,也是借助于requestanimationframe来不断的去读取滚动元素的transform来拿到scrolltop同时触发onscroll回调。
  5. demo体验:关于模拟滚动和正常滚动,两者在性能上差别还是比较明显的,下面时两个demo,可以扫描体验一下:
    正常滚动模拟滚动
    衡量指标:衡量滚动是否流畅的指标fps,我这边也统计了一下正常滚动和模拟滚动的fps数据:
    正常滚动
    模拟滚动
    结论: 模拟滚动的fps值波动较大,这样滚动起来会有明显的卡顿感觉,各位体验的时候如果滚动超过10屏之后就可以明显感觉到两着的区别。
    在使用模拟滚动时,浏览器在js层面会消耗更多的性能去改变dom元素的位置,在dom复杂层级深的页面更为高,所以在长列表滚动时还要使用正常滚动更好。

知识点3:滚动和下拉刷新

?


  1. 下拉刷新的元素在页面顶部,正常浏览时不可见的。
  2. 当在页面顶部往下滚动时出现下拉刷新元素,当手指离开时收起。
  3. 以上两点时实现一个下拉刷新组件的基本步骤,结合我们上述关于滚动的描述,我们可以这样实现下拉刷新:

    方案1:借助iscroll的原理,整个页面使用模拟滚动,将下拉刷新元素放在顶部,当页面滚动到顶部下拉时,下拉刷新元素随着页面的滚动出现,当手指离开时收回,此方案实现起来较为简单直接借助iscoll即可,但是使用了模拟滚动之后在正常的列表滚动时性能上不如正常滚动。
    方案2:页面使用正常滚动,将下拉刷新元素放置在顶部top值为负值(正常情况下不可见),当页面处于顶部时下拉,这时监听touchmove事件,修改scrollcontent的tranlateY值,同时修改下拉刷新元素的tranlateY值,将两者同时位移来将下拉刷新元素显示出来,手指离开时(touchend)收回,这种方案满足了在正常列表滚动时使用原生的滚动节省性能,只在下拉刷新时使用模拟滚动来实现效果。
    方案3:方案2的改良版,唯一不同是将下拉刷新元素和scrollcontent放在一个div里,将下拉刷新元素的margintop设为负值,在下拉刷新时,只需要修改scrollcontent一个元素的tranlateY值即可实现下拉,在性能上要比方案2好。
  4. 性能问题:在采用了上述方案之后,还会有一个性能上的问题就是:当页面的列表过长,dom元素过多时,在模拟滚动,下拉刷新这段时间内,页面也会有卡顿现象,这里采取了一个
  5. 优化策略
    1) 列表较长时dom数量较多时,在触发下拉刷新的时机时将页面视窗之外的dom元素隐藏或者存放在fragment里面。
    2) 在刷新完成之后手指离开(touchend)时将隐藏的元素显示出来。
    3) 需要注意的是,隐藏和显示视窗外的元素这个操作在下拉刷新时只会执行一次,并且只有在下拉刷新时才会执行。

AlloyPullRefresh(基于上述知识点开发的组件)

?


  1. 定义下拉刷新元素样式
  2. 下拉刷新事件回调
  3. 支持zepto版本和react版本

github地址:https://github.com/AlloyTeam/AlloyPullRefresh/





原创文章转载请注明:


转载自AlloyTeam:http://www.alloyteam.com/2017/04/secrets-of-mobile-web-scroll-bars-and-drop-refresh/

相关文档

  • 灯箱广告制作合同
  • 保持环境卫生倡议书最新
  • 专业硕士和学术硕士有什么区别是什么
  • 为人师表怎样造句
  • 【Python】解析Python的缩进规则
  • 剑指Offer 48-最长不含重复字符的子字符串C++
  • 巨杉2017行业认可盘点
  • 宫颈糜烂会引起腰疼吗 月经量少腰疼怎么调理
  • 高冷霸气妆容画法教程图片
  • 安全教育座谈会学习心得体会3篇
  • 鼻子上的黑头怎么去掉怎么去掉鼻子上的黑头
  • 简单出口货运代理合同3篇
  • 苹果6已隐藏相薄在哪里
  • 数据库 ?? 查询避免 Unknown column ‘xxx’ in ‘where clause’ 错误
  • 自制口红和品牌口红有什么区别还是品牌口红靠谱
  • 关于敬畏自然的素材
  • Synchronized锁升级过程:
  • 支付宝支付接口-运行支付宝demo
  • 思科、华为:GRE 介绍和配置
  • 香港查询结婚怎么查
  • 一次性纸杯手工制作方法
  • 避免SEO优化被惩罚十大注意事项
  • 狠抓学生语文习惯养成和语文素养提高典型做法汇报
  • spring-boot 即时重新启动(热更替)
  • 腾讯出品13w字“Netty速成手册”,3天就能实战
  • 中学朗诵比赛主持人开场白
  • 英文励志的歌曲
  • 网事散文
  • 高铁班毕业典礼及汇报演出主持词模板
  • lol英雄台词最长的是谁求台词……
  • 猜你喜欢

  • 通缉令是如何发出的
  • 大学四年学习的计划书
  • 一年级小学生暑假作文素材积累
  • 重庆市普通高中2018年6月学生学业水*考试物理试题
  • 如何恢复手机壁纸设置方法
  • 人教新课标小学四年级语文上册同步练*试卷第七册同步训练白鹅试题及答案
  • 11月银行实*日志范文
  • 油浴使用说明
  • (湖南专用)2019中考物理高分一轮 单元16 比热容 热机课件
  • book6 Unit 4 passage 2 reading
  • 胡萝卜的几种保鲜储藏方法
  • 地尔硫治疗不稳定型心绞痛的疗效观察
  • 2016年天财会计专硕(mpacc)难度大不大
  • 【最新2018】201X年教师节标语 教师节标语-精选word文档 (2页)
  • 浅析如何加强公路工程的施工质量管理
  • 修改版 小学一年级数学解题能力竞赛
  • 空调电辅热是什么意思?该不该选择
  • 关于田园风光的优秀作文精选
  • 财税实务关于几份上市公司高新技术企业资格公告的一些探讨
  • 2020年初一学期学习总结
  • 大话ERP全集
  • Ki-67、P53蛋白在乳腺良恶性病变中的表达及意义
  • 最新北师大版四年级数学上路程速度时间应用题
  • 学校人事部14年度工作总结报告
  • 高三语文复习方法指导归纳
  • numpy交换维度_NumPy数组行列交换
  • 世界杯结束了
  • kepserver在设备上添加项目失败_隔空投送存储项目失败怎么办
  • 徐州呵护福祉卫生用品有限公司企业信息报告-天眼查
  • 我的红领巾_二年级作文_1
  • (精选)2019年新人教版一年级数学下册第八单元:解决问题(教学课件)
  • 武汉科技大学考研真题之安全管理(B卷)2013年专业课考研真题
  • 肠内营养管理PPT课件
  • 长沙安捷生物科技有限公司企业信用报告-天眼查
  • 文秘知识-公司内部财务管理制度 精品
  • 天津麦康那科技有限公司企业信用报告-天眼查
  • 新疆兵团第二师华山中学2017_2018学年高二数学下学期第一次月考试题理-含答案
  • 2020届中考英语 完形填空与阅读理解复*练* Unit 12.doc
  • 2018-2023年中国商业银行不良资产处置市场现状调研分析及发展前景报告目录
  • E美食2008年美食摄影大赛方案--ibmthinkman
  • 一年级上册语文课件 课文(一) 2. 小小的船 人教部编版
  • 2019秋PEP版六年级英语上册:期末检测题(有答案) (六).doc
  • 电脑版