获得成分间隔浏览区域的偏离,获取页面成分的
分类:前端技术

滚动,你真正懂了吧

2015/10/07 · JavaScript · 滚动

原版的书文出处: IMWEB - coverguo   

在业务中,页面滚动的气象比较大规模,

所以对于滚动的充足明白,可以让大家巩固开拓的频率!

得到浏览器展现区域(可视区域)的莫大 :   

javascript中scrollTop详解,javascriptscrolltop

scrollTop 表示滚动的万丈,暗许从position:0;早先向下滚,scrollTop(offset)的offset表示相对顶上部分的摇荡,以像素计,<br/>
scrollTop(卡塔尔滚动的冲天不仅能‘设置'滚动值,也能‘获取'滚动值。
当设置滚动值时,该办法就可以设置有着相称成分的轮转值。
当得到滚动值时,该办法只回去第八个匹配成分的轮转地点。
亟待获得scrollTop的值,能够参照他事他说加以考察如下代码:

复制代码 代码如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

1、各浏览器下 scrollTop的差异

IE6/7/8:
对于未有doctype评释的页面里能够应用  document.body.scrollTop 来赢得 scrollTop中度 ;
对于有doctype表明的页面则足以行使 document.documentElement.scrollTop;
Safari:
safari 相比特别,有和好拿走scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相持标准些的浏览器就方便多了,间接用 document.documentElement.scrollTop ;

2、获取scrollTop值

完美的获取scrollTop 赋值短语 :

复制代码 代码如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过那句赋值就能够在其余情状下得到scrollTop 值。
有心人观望那句赋值,你发觉什么了没??
没有疑问, 正是 window.pageYOffset  (Safari卡塔尔(英语:State of Qatar)   被停放在 || 的中间地点。
因为当 数字0 与 undefine 举行或运算时,系统暗许重临最终二个值。即或运算中 0 == undefine ;
当页面滚动条无独有偶在最顶部,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari卡塔尔国 再次来到为 undefine ,那时将window.pageYOffset  (Safari卡塔尔(英语:State of Qatar) 放在或运算最终边时, scrollTop 再次回到 undefine ,  undefine 用在接下去的运算就能够报错咯。
而别的浏览器 无论 scrollTop 赋值或运算顺序如何都不会再次回到 undefine.  能够优哉游哉选用..
之所以说干净照旧IE的标题咯. 杯具…
饱满有些恍惚,不知晓有未有发挥清楚。
但是末了计算出来那句实验过OK,我们放心使用;

复制代码 代码如下:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD相关表达:

页面具备 DTD,恐怕说钦命了 DOCTYPE 时,使用 document.documentElement。

页面不有所 DTD,或然说未有一点点名了 DOCTYPE,时,使用 document.body。

在 IE 和 Firefox 中均是如此。

为了同盟,不管有未有 DTD,能够行使如下代码:

复制代码 代码如下:
var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop 
                || document.body.scrollTop 
                || 0;

documentElement 和 body 相关表明:

body是DOM对象里的body子节点,即 <body> 标签;

documentElement 是成套节点树的根节点root,即<html> 标签;

DOM把档期的顺序中的每二个目的都称之为节点,正是一个档案的次序构造,你能够掌握为贰个树形布局,就如大家的目录同样,贰个根目录,根目录下有子目录,子目录下还会有子目录。

以HTML超文本标识语言为例:整个文书档案的一个根就是,在DOM中得以采纳document.documentElement来访谈它,它便是风流倜傥体节点树的根节点。而body是子节点,要拜候到body标签,在剧本中应当写:document.body。

意气风发旦你想点击按键滚动到page顶上部分,使用jquery点击施行代码$(document卡塔尔(قطر‎.scrollTop(0卡塔尔就能够滚动到最上部了。

同等的轮转地方scrollLeft表示往左边滚动的职位。

如上所述就是本文的全体内容了,希望我们能够合意。

scrollTop 代表滚动的可观,暗中同意从position:0;开首向下滚,scrollTop(offset)的offset表示相对顶端的摇荡,...

网页被卷起来的惊人/宽度(即浏览器滚动条滚动后隐瞒的页面内容中度)

滚动的两种情形

  • 唯有window窗体滚动
  • 内滚动布局
  • 窗体滚动 DIV内滚动

此刻,台下观众会问,什么是内滚动布局,什么是window滚动呢?

让我们来打听下哈

$(window).height();   

**(javascript)        **document.documentElement.scrollTop //firefox

独有window窗体滚动

即页面只含有浏览器窗体暗中认可的滚动条,窗体滚动条随页面内容而不仅加强。

如手Q醉生梦死的站点首页, 在android机上正是应用window滚动

图片 1

获得浏览器呈现区域(可视区域)的肥瘦 :

**(javascript)        **document.documentElement.scrollLeft //firefox

内滚动构造

怎么着是内滚动构造呢? 个人认为,内滚动布局正是主滚动条是在页面内部,并非浏览器窗体上的布局。 故内滚动结构是相持守旧的window窗体滚动来说的。

(具体怎么ios上和android上会使用差异的轮转方式,能够去了然下=。=)

内滚动布局如曾几何时候会利用了?

  • ios 页面最上部带有fixed输入框(消除软键盘弹出招致页面错位的标题)

例如,手Q醉生梦死的站点首页, 在ios机上就是内滚动结构

图片 2

  • 桌面软件照旧顾客端,如群活动

图片 3

  • 治本种类也可能有平时使用

$(window).width();   

**(javascript)        **document.body.scrollTop //IE

窗体滚动 DIV内滚动

这种光景就是,两个都会不由自主,故计算滚动时最棒复杂。

图片 4

获取页面包车型大巴文书档案中度   

**(javascript)        **document.body.scrollLeft //IE

滚动总计功底知识

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

首先,大家想要越来越好的操作调整条,需通晓多少个地方

  • 滚动条属性
  • 滚动条调用方法

JavaScript

var $scrollTarget = $(".ui-page"卡塔尔(英语:State of Qatar); //若为操纵window滚动条 var currenY = $(document.body卡塔尔(英语:State of Qatar).scrollTop(卡塔尔国; //当前window纵向滚动的地点 var currenX = $(document.body卡塔尔.scrollLeft(卡塔尔; //当前window横向滚动的岗位 var Y = 想滚动到的垂直地点; var X = 想滚动到的水准地方; $(window卡塔尔(英语:State of Qatar).scrollTop(Y卡塔尔; $(window卡塔尔(قطر‎.scrollLeft(X卡塔尔国; //若为页面内节点的滚动条 var currenY =$scrollTarget.scrollTop(卡塔尔国; //当前scrollTarget纵向滚动的垂直地方 var currenX = $scrollTarget.scrollLeft(卡塔尔国; //当前scrollTarget横向滚动条的职责$scrollTarget.scrollTop(Y卡塔尔(قطر‎; $scrollTarget.scrollLeft(X卡塔尔(英语:State of Qatar);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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的指标

(不一样浏览器其获取浏览器窗体滚动条的办法也存在着异样,大家能够去探听下)

接下去,大家询问下多少个重大的属性值

JavaScript

//当前window可视内容区域宽高: window.innerWidth window.innerHeight //浏览器滚动条偏移值: $(document.body卡塔尔.scrollTop(卡塔尔(英语:State of Qatar); //节点offset值 $("#div").offset().top; $("#div"卡塔尔(قطر‎.offset(卡塔尔国.left; //节点的宽高 $("#div").height(); $("#div"卡塔尔(قطر‎.width(卡塔尔(قطر‎; //节点的滚动条偏移值 $("#div").scrollTop();

1
2
3
4
5
6
7
8
9
10
11
12
13
//当前window可视内容区域宽高:
window.innerWidth
window.innerHeight
//浏览器滚动条偏移值:
$(document.body).scrollTop();
//节点offset值
$("#div").offset().top;
$("#div").offset().left;
//节点的宽高
$("#div").height();
$("#div").width();
//节点的滚动条偏移值
$("#div").scrollTop();

近期大家精晓怎么调用滚动条到钦点的职位和获取滚动条偏移值,那么大家来做叁个要求把

借使是那几个页面

图片 5

必要描述 : 希望经过点击开关,使木色区域的item,可以稳定到显示器中间

这种必要很普及吧~

这就是说我们先分析下页面, 能够从页面中看出,这些是贰个内滚动布局单页页面。

JavaScript

//相信大家js代码正是那般写的 var itemHeight = 每种item的惊人 var itemIndex = 内定item的下标(1, 2,3 ...卡塔尔(英语:State of Qatar) var rightPosY = itemHeight * itemIndex //使灰褐区域的item能滚动到列表可视区域的中档的偏移值; $(button卡塔尔(قطر‎.on("click", function(卡塔尔{ $(scrollDom卡塔尔.scrollTop(rightPosY卡塔尔(قطر‎; }卡塔尔(قطر‎;

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

那正是说我们就糟糕听了,举起双臂抗议说 :“这些太轻易了,倘若每一种列表item都是惊人不平等,且中度未知的啊?“

那么难点晋级了,大家来设想下那么些主题素材,如下图深入分析图

图片 6

为了使目的节点,移动到内滚动区域的中级线 大家最终须求知道当前指标节点间隔中间线的偏移值,然后加上圈套前滚动区域的滚动条偏移值,正是大家要求滚动条滚动到的偏移值大小了。

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

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

那么distance 怎么获取呢? 大家得以从地点的解析图得出

JavaScript

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

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

完全代码

JavaScript

var distance = $("#targetDom").offset().top - $("#scrollDom").offset().top - $("#scrollDom"卡塔尔(قطر‎.height/2; //算出近日节点在 var rightY = $(scrollDom卡塔尔(قطر‎.scrollTop distance; var $(scrollDom卡塔尔(英语:State of Qatar).scrollTop(rightY卡塔尔(قطر‎;

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

假若弄理解了滚动涉及的品质和格局,在事情支付中,则能飞速拿到想要的轮转效应。

1 赞 4 收藏 评论

图片 7

$(document).height();   

**(jqurey)            ** $(window).scrollTop() 

赢得页面包车型大巴文书档案宽度 :

**(jqurey)             **$(window).scrollLeft()

$(document).width(); 

网页专门的职业区域的高度和幅度

浏览器当前窗口文书档案body的可观:  

(javascript)       document.documentElement.clientHeight// IE firefox       

$(document.body).height();

(jqurey)             $(window).height()

浏览器当前窗口文书档案body的宽窄: 

要素距离文书档案最上端和左臂的偏移值

$(document.body).width();

(javascript)        DOM成分对象.offsetTop //IE firefox

获得滚动条到最上部的垂直中度 (即网页被卷上去的惊人卡塔尔(英语:State of Qatar)  

(javascript)        DOM成分对象.offsetLeft //IE firefox

$(document).scrollTop();   

(jqurey)             jq对象.offset().top

拿到滚动条到侧面包车型大巴垂直宽度 :

(jqurey)             jq对象.offset().left

$(document).scrollLeft(); 

 

赢得或设置成分的拉长率:

获得页面成分间隔浏览器职业区顶部的偏离

$(obj).width();

页面成分间隔浏览器职业区顶部的离开 = 成分间距文书档案顶上部分偏移值 - 网页被卷起来的万丈

拿到或安装成分的惊人:

即:

$(obj).height();

页面成分间隔浏览器专门的学问区顶部的距离= DOM成分对象.offsetTop - document.documentElement.scrollTop

某些成分的上面界到body最顶端的离开:obj.offset(卡塔尔(قطر‎.top;(在要素的含有成分不含滚动条的场所下)

有个别成分的左侧界到body最左侧的偏离:obj.offset(卡塔尔(قطر‎.left;(在要素的包涵成分不含滚动条的意况下)

归来当前因素的下边界到它的盈盈成分的上面界的偏移量:obj.offset(卡塔尔.top(在要素的蕴含成分含滚动条的情形下)

回来当前因素的右边界到它的隐含成分的侧边界的偏移量:obj.offset(卡塔尔(قطر‎.left(在要素的盈盈成分含滚动条的景观下)

 

scrollTop(), scrollLeft()

设置或回到已经滚动到成分的左侧界或上边界的像素数。轻松地说,正是设置或然获得相配成分相对滚动条上侧也许侧边的舞狮。唯有在要素有滚动条的时候,例如,成分的 CSS overflow 属性设置为 auto 的时候,那一个像素才有用。这个属性也只在文档的 <body> 或 <html> 标记上定义(那和浏览器有关),何况一路来制订滚动文书档案的职位。注意,那个属性并不会钦定三个<iframe> 标记的滚动量。那是非规范的但却得到很好协理的属性

本文由pc28.am发布于前端技术,转载请注明出处:获得成分间隔浏览区域的偏离,获取页面成分的

上一篇:何以要写测验用例,的有的提议 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 何以要写测验用例,的有的提议
    何以要写测验用例,的有的提议
    在 2017 年学习 React Redux 的一些建议(下篇) 2017/09/11 · JavaScript· React,Redux 原文出处: 郭永峰    在这里说一下前端开发的一个特点是更多的会涉及用户界
  • js从0开始构思表情插件
    js从0开始构思表情插件
    js从0开头考虑表情插件 2016/07/28 · JavaScript· 插件 本文小编: 伯乐在线 -陈被单。未经作者许可,禁绝转发! 应接加入伯乐在线 专辑小编。 前言: 是因为
  • 且是否滚动到头部或者底部,子元素scroll父元素
    且是否滚动到头部或者底部,子元素scroll父元素
    子元素scroll父元素容器不跟随滚动JS实现 2015/12/18 · JavaScript· 滚动 原文出处:张鑫旭    一、开场暖身 网上常见蹲来蹲去的小段子,比方说:“李代沫蹲
  • 用功率信号来支配异步流程,web播放控件
    用功率信号来支配异步流程,web播放控件
    用确定性信号来支配异步流程 2017/08/08 · JavaScript· 异步 原版的书文出处:十年踪迹    总结 大家通晓,JavaScript 不管是操作DOM,还是进行服务端职责,不
  • 聊一聊原生浏览器中的模块,动态加载JS函数
    聊一聊原生浏览器中的模块,动态加载JS函数
    聊风流浪漫聊原生浏览器中的模块 2018/07/04 · 底子技能 ·浏览器 初藳出处:记    自从ES二零一四杀青以来,大家透过 Babel等转移工具得以在等级次序中平