滚动计算基础知识
本文转自:http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400345712&idx=1&sn=36eb26efcc3bce8e008b0dae4a501b67&scene=23&srcid=1026Bl3y1U7jxxgpGWrLDeuM#rd
由于不同浏览器其窗体滚动条的属性获取方式有所差异,故考虑兼容性,我们假设使用了场景是移动端,并且使用了zepto的库
首先,我们想要更好的操作控制条,需了解两个地方
-
滚动条属性
- 滚动条调用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var $scrollTarget = $( ".ui-page" ); //若为控制window滚动条 var currenY = $(document.body).scrollTop(); //当前window纵向滚动的位置 var currenX = $(document.body).scrollLeft(); //当前window横向滚动的位置 var Y = 想滚动到的垂直位置; var X = 想滚动到的水平位置; $(window).scrollTop(Y); $(window).scrollLeft(X); //若为页面内节点的滚动条 var currenY =$scrollTarget.scrollTop(); //当前scrollTarget纵向滚动的垂直位置 var currenX = $scrollTarget.scrollLeft(); //当前scrollTarget横向滚动条的位置 $scrollTarget.scrollTop(Y); $scrollTarget.scrollLeft(X); 我们可以发现 在这里window滚动比较特殊 其获取滚动属性是用 document.body这个对象,而调用滚动条滚动方法是用window的对象 (不同浏览器其获取浏览器窗体滚动条的方式也存在着差异,大家可以去了解下) |
接下来,我们了解下几个重要的属性值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //当前window可视内容区域宽高: window.innerWidth window.innerHeight //浏览器滚动条偏移值: $(document.body).scrollTop(); //节点offset值 $( "#div" ).offset().top; $( "#div" ).offset().left; //节点的宽高 $( "#div" ).height(); $( "#div" ).width(); //节点的滚动条偏移值 $( "#div" ).scrollTop(); 现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值,那么我们来做一个需求把 |
1 |
1 | 需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间 |
1 |
1 | 这种需求很常见吧~那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。 |
1 2 3 4 5 6 7 8 | //相信我们js代码就是这样写的 var itemHeight = 每个item的高度 var itemIndex = 指定item的下标(1, 2,3 ...) var rightPosY = itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值; $(button).on( "click" , function (){ $(scrollDom).scrollTop(rightPosY); }); |
1 |
那么大家就不满意了,举起双手抗议说 :“这个太简单了,如果每个列表item都是高度不一致,且高度未知的呢?“
那么问题升级了,我们来考虑下这个问题,如下图分析图
为了使目标节点,移动到内滚动区域的中间线 我们最终需要知道当前目标节点距离中间线的偏移值,然后加上当前滚动区域的滚动条偏移值,便是我们需要滚动条滚动到的偏移值大小了。
即最终偏移值 = 当前目标节点距离中间线的偏移值 + 当前滚动区域的滚动条偏移值;
可知,当前滚动区域的滚动条偏移值即等于 $("#scrollDom").scrollTop()
那么distance 怎么获取呢? 我们可以从上面的分析图得出
1 2 3 4 5 | var distance = $( "#targetDom" ).offset().top - $( "#scrollDom" ).offset().top - $( "#scrollDom" ).height/2; //算出当前节点在 var rightY = $(scrollDom).scrollTop + distance; var $(scrollDom).scrollTop(rightY); |
只要弄明白了滚动涉及的属性和方法,在业务开发中,则能迅速得到想要的滚动效果
1 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步