Quantcast
Channel: 用户5641600752的博客
Viewing all articles
Browse latest Browse all 10

[转载]Javascript中与Scroll有关的方法

0
0


这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下...

与scroll相关的方法

4个window对象下:scrollX、scrollY、scrollTo、scroll(作用和scrollTo一样)

4个Element对象下:scrollWidth、scrollHeight、scrollLeft、scrollTop

 

window对象下(BOM)

window.scrollX、window.scrollY

var x = window.scrollX;  // 以像素为单位,返回水平轴上document已经被卷去的宽度   number类型
var y = window.scrollY;  // 以像素为单位,返回垂直方向上document被卷曲的高度     number类型

pageYOffset 属性是 scrollY 属性的别名,pageXOffset同理,为了跨浏览器兼容,一般用后者(pageYOffset、pageXOffset)。

另外旧版本(<9)对这两个属性都不支持,应该选用非标准的属性。

兼容性代码如下:(获取页面垂直和水平的滚动距离!)(复杂版)


var supportPageOffset = window.pageXOffset !== undefined;  // 判断是否支持pageXOffset
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");  // 判断渲染模式是不是标准模式
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

 

window.scrollTo( x-coord, y-coord ) :


MDN API原文:(以左上角为坐标原点,以像素为单位沿水平和垂直方向滚动到指定位置)

x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.

y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

不需要做兼容,可以直接用

window.scroll( x-coord, y-coord ): 作用同 window.scrollTo()

 

Element对象下(DOM):

scrollWidth:只读属性,返回该元素内容区域宽度自身宽度较大的一个,若自身宽度大于内容宽度(存在滚动条),则scrollWidth>clientWidth.

注意:该属性返回的是四舍五入后的整数值,如果需要小数,请用:Element.getBoundingClientRect().

var xScrollWidth = element.scrollWidth;

 

scrollHeight:只读属性,返回该元素内容高度。包含被overflow隐藏掉的部分。包含padding,不包含margin.如果需要小数,请用:Element.getBoundingClientRect().

var yScrollHeight = element.scrollHeight;

应用点:(判断元素是否滚动到底部,底下等式若返回 true ,则是,否则不是)

element.scrollHeight - element.scrollTop === element.clientHeight;

 

scrollLeft:读取或设置元素滚动条到元素左边的距离。

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

 

scrollTop:设置或获取该元素顶部距离其容器顶部的距离,无滚动条时为0。

//获取滚动的高度(被卷去的高度)
var intElementScrollTop = element.scrollTop;

// 设置滚动的距离
element.scrollTop = intValue;

兼容性代码如下:(获取、设置页面垂直方向的滚动距离!水平方向同理)(简易版)

//获取滚轮滚动的距离,适配所有的浏览器
function getScrollY(){
    return window.pageYOffset || document.documentElement.scrollTop;
}
//设置垂直方向滚轮滚动的距离,适配所有的浏览器,num为滚动距离
function setScrollY(num){
    document.body.scrollTop = document.documentElement.scrollTop = num;
}

 

总结:

  由上面的两个兼容代码可以看出,我们总是把window下的scrollY(pageYoffset)、scrollX(pageXoffset)方法和element下的scrollTop、scrollLeft方法混在一起用,其实这两个是有本质区别的。一个获取的是window窗口的滚动距离一个获取的是某一个元素的滚动距离,当获取的元素是body时,window.scrollY(window.pageYoffset) = document.body.scrollTop。


扩展:关于获取各种浏览器可见窗口大小的一点点研究 
扩展:准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

 博客地址:offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect() 
参考链接: http://www.css88.com/archives/1767 http://www.css88.com/archives/90 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop 
如需博文转载,请附加原文链接 
博客地址:http://www.cnblogs.com/zxjwlh 
博主箴言:牛逼不可怕,可怕的是人家比你牛逼还比你努力!

 

Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images