需要获取scrollTop的值,获取浏览器显示区域(可

作者: 前端  发布:2019-11-21

滚动,你真的懂了吗

2015/10/07 · JavaScript · 滚动

原文出处: IMWEB - coverguo   

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

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

js与jquery获得页面大小、滚动条位置、元素位置

scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计,<br/>
scrollTop()滚动的高度既能‘设置'滚动值,也能‘获取'滚动值。
当设置滚动值时,该方法就会设置所有匹配元素的滚动值。
当获取滚动值时,该方法只返回第一个匹配元素的滚动位置。
需要获取scrollTop的值,可以参考如下代码:

获取浏览器显示区域(可视区域)的高度 :   

滚动的几种场景

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

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

让我们来了解下哈

复制代码 代码如下:

复制代码 代码如下:

$(window).height();   

只有window窗体滚动

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

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

9159.com 1

//页面位置及窗口大小

var scrollTop = document.documentElement.scrollTop || window.pageYOfset ||document.body.scrollTop;

获取浏览器显示区域(可视区域)的宽度 :

内滚动布局

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

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

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

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

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

9159.com 2

  • 桌面软件或者客户端,如群活动

9159.com 3

  • 管理系统也有经常使用

function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{    // Mozilla   
scrW = window.innerWidth + window.scrollMaxX;   
scrH = window.innerHeight + window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{    // all but IE Mac   
scrW = document.body.scrollWidth;   
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac   
scrW = document.body.offsetWidth;   
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE   
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{    // IE 6 Strict Mode   
winW = document.documentElement.clientWidth;    
winH = document.documentElement.clientHeight;
} else if (document.body) { // other   
winW = document.body.clientWidth;   
winH = document.body.clientHeight;
}    // for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;   
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};

1、各浏览器下 scrollTop的差异

$(window).width();   

窗体滚动+DIV内滚动

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

9159.com 4

};

IE6/7/8:
对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

获取页面的文档高度   

滚动计算基础知识

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

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

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

JavaScript

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);

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(); //节点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();

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

假设是这个页面

9159.com 5

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

这种需求很常见吧~

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

JavaScript

//相信我们js代码就是这样写的 var itemHeight = 每个item的高度 var itemIndex = 指定item的下标(1, 2,3 ...) 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都是高度不一致,且高度未知的呢?“

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

9159.com 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).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 收藏 评论

9159.com 7

//滚动条位置 function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{    // all except IE   
y = window.pageYOffset;   
x = window.pageXOffset;
} else if(document.documentElement && document.documentElement.scrollTop)
{    // IE 6 Strict   
y = document.documentElement.scrollTop;   
x = document.documentElement.scrollLeft;
} else if(document.body) {    // all other IE   
y = document.body.scrollTop;   
x = document.body.scrollLeft;  
}
return {X:x, Y:y};

2、获取scrollTop值

$(document).height();   

}

完美的获取scrollTop 赋值短语 :

获取页面的文档宽度 :

jquery

复制代码 代码如下:

$(document).width(); 

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

浏览器当前窗口文档body的高度:  

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值,你发现啥了没??
没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。  IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用;

$(document.body).height();

计算元素位置和偏移量 offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把 滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin   是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true

复制代码 代码如下:

浏览器当前窗口文档body的宽度: 

您可能感兴趣的文章:

  • JavaScript与JQUERY获取元素的宽、高和位置
  • js从数组中删除指定值(不是指定位置)的元素实现代码
  • JS实现随页面滚动显示/隐藏窗口固定位置元素
  • javascript实现拖动元素交换位置
  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
  • JavaScript控制网页平滑滚动到指定元素位置的方法
  • 在JS数组特定索引处指定位置插入元素的技巧
  • 在JS数组特定索引处指定位置插入元素
  • JS中获取 DOM 元素的绝对位置实例详解

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

$(document.body).width();

DTD相关说明:

获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  

页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

$(document).scrollTop();   

页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

获取滚动条到左边的垂直宽度 :

在 IE 和 Firefox 中均是如此。

$(document).scrollLeft(); 

为了兼容,不管有没有 DTD,可以使用如下代码:

获取或设置元素的宽度:

复制代码 代码如下:

$(obj).width();

var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop 
                || document.body.scrollTop 
                || 0;

获取或设置元素的高度:

documentElement 和 body 相关说明:

$(obj).height();

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

某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)

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

某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)

以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。

返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

如果你想点击按钮滚动到page顶部,使用jquery点击执行代码$(document).scrollTop(0)就可以滚动到顶部了。

 

同样的滚动位置scrollLeft表示往左边滚动的位置。

scrollTop(), scrollLeft()

以上所述就是本文的全部内容了,希望大家能够喜欢。

设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说,就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

您可能感兴趣的文章:

  • 深入浅析JavaScript中的scrollTop
  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
  • JS中完美兼容各大浏览器的scrolltop方法
  • javascript scrollTop正解使用方法
  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
  • js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
  • javascript的offset、client、scroll使用方法详解
  • js动态添加onload、onresize、onscroll事件(另类方法)
  • js中scrollTop()方法和scroll()方法用法示例

本文由9159.com发布于前端,转载请注明出处:需要获取scrollTop的值,获取浏览器显示区域(可

关键词: