滚动,你真的懂了吗

在业务中,页面滚动的场景十分常见,

因此对于滚动的充分了解,可以让我们提高开发的效率!

滚动的几种场景

  • 只有window窗体滚动
  • 内滚动布局
  • 窗体滚动+DIV内滚动

这时候,台下观众会问,什么是内滚动布局,什么是window滚动呢?

让我们来了解下哈

只有window窗体滚动

即页面只含有浏览器窗体默认的滚动条,窗体滚动条随页面内容而不断增长。

如手Q吃喝玩乐的站点首页, 在android机上就是使用window滚动

内滚动布局

什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。

(具体为什么ios上和android上会使用不同的滚动方式,可以去了解下=。=)

内滚动布局什么时候会使用了?

  • ios 页面顶部带有fixed输入框(解决软键盘弹出导致页面错位的问题)

例如,手Q吃喝玩乐的站点首页, 在ios机上便是内滚动布局

  • 桌面软件或者客户端,如群活动
  • 管理系统也有经常使用

窗体滚动+DIV内滚动

这种场景就是,两者都会出现,故计算滚动时最为复杂、

滚动计算基础知识

由于不同浏览器其窗体滚动条的属性获取方式有所差异,故考虑兼容性,我们假设使用了场景是移动到,并且使用了zepto的库

首先,我们想要更好的操作控制条,需了解两个地方

  • 滚动条属性
  • 滚动条调用方法
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的对象 (不同浏览器其获取浏览器窗体滚动条的方式也存在着差异,大家可以去了解下)

接下来,我们了解下几个重要的属性值

//当前window可视内容区域宽高: 
window.innerWidth
window.innerHeight
//浏览器滚动条偏移值:
$(document.body).scrollTop();
//节点offset值
$("#div").offset().top;
$("#div").offset().left;
//节点的宽高
$("#div").height();
$("#div").width();
//节点的滚动条偏移值
$("#div").scrollTop();

现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值,那么我们来做一个需求把

假设是这个页面

需求描述 : 希望通过点击按钮,使绿色区域的item,能够定位到屏幕中间

这种需求很常见吧~

那么我们先分析下页面, 可以从页面中看出,这个是一个内滚动布局单页页面。

//相信我们js代码就是这样写的
var itemHeight = 每个item的高度
var itemIndex = 指定item的下标(1, 2,3 ...)
var rightPosY =  itemHeight * itemIndex //使绿色区域的item能滚动到列表可视区域的中间的偏移值;
$(button).on("click", function(){
    $(scrollDom).scrollTop(rightPosY);
});

那么大家就不满意了,举起双手抗议说 :“这个太简单了,如果每个列表item都是高度不一致,且高度未知的呢?

那么问题升级了,我们来考虑下这个问题,如下图分析图

为了使目标节点,移动到内滚动区域的中间线 我们最终需要知道当前目标节点距离中间线的偏移值,然后加上当前滚动区域的滚动条偏移值,便是我们需要滚动条滚动到的偏移值大小了。

即最终偏移值 = 当前目标节点距离中间线的偏移值 + 当前滚动区域的滚动条偏移值;

可知,当前滚动区域的滚动条偏移值即等于 $("#scrollDom").scrollTop();

那么distance 怎么获取呢? 我们可以从上面的分析图得出

    var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;

完整代码

  var distance =  $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom").height/2;
   //算出当前节点在
   var rightY  = $(scrollDom).scrollTop + distance;
   var $(scrollDom).scrollTop(rightY);

只要弄明白了滚动涉及的属性和方法,在业务开发中,则能迅速得到想要的滚动效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

54813
来自专栏张俊红

爬虫进阶(二)

总第66篇 在前面的几篇推文中我们分享了最基础的爬虫入门,以及基于AJAX的爬虫入门,这篇我们分享关于如何利用selenium对目标网页进行数据爬取的。 01|...

3298
来自专栏SeanCheney的专栏

Scrapy1.4最新官方文档总结 1 介绍·安装安装

《Learning Scrapy》这本书是2016年1月出版的,作者使用的版本是Scrapy 1.0.3。 现在,Scrapy的最新版本是1.4。 ? Scra...

2448
来自专栏前端说吧

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

3095
来自专栏郭诗雅的专栏

玩转flex布局

H5页面如果使用了flex,就会发现处处离不开它,因为实在太多优点了!

36719
来自专栏前端杂货铺

js实现css3的过渡,需要注意的一点(浏览器优化)

大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子,一定时间内本应多次重排的改变,浏览器会hold住,仅一次重排。其中如果使用分离的一步处理过程,例如计...

3438
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

702
来自专栏用户2442861的专栏

Qt 自定义 滚动条 样式

http://www.cnblogs.com/xufeiyang/p/3314955.html

571
来自专栏九彩拼盘的叨叨叨

滑动到底部无限加载的实现

我们常常会碰到数据条数很多,需要分页显示的情况。对于移动端页面,我们一般会用每次滚动到接近页面底部时,加载更多(下一页)数据的方式。本文就来介绍下滑动到底部无限...

442
来自专栏一个番茄说

Scrapy爬虫学习记录

昨天休息的时候偶然发现了一个的球鞋网站,上面有很多关于球鞋的资讯。于是,决定现学现卖,学习scrapy把数据都给爬下来。

462

扫码关注云+社区