各种滚动条的获取

最新推荐文章于 2024-07-14 11:18:54 发布

最新推荐文章于 2024-07-14 11:18:54 发布 · 287 阅读

文章标签：

#scroll #滚动条 #获取滚动条位置 #scroll location #scroll Coordinate

java web 同时被 2 个专栏收录

237 篇文章

订阅专栏

javascript

140 篇文章

订阅专栏

本文介绍了如何使用JavaScript来获取不同元素的滚动条位置，包括页面、iframe及div等，并提供了跨浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用javascript如何获取页面滚动条呢?

(1)获取页面滚动条

// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
    return {
        top:document.documentElement.scrollTop || document.body.scrollTop,
        left:document.documentElement.scrollLeft || document.body.scrollLeft,
        height:document.documentElement.scrollHeight ||document.body.scrollHeight
    }
}

(2)获取iframe滚动条

/***
* get iframe window'scroll
*/
com.whuang.hsj.getIframeScroll=function(iframeObj){
	var document22=iframeObj.contentWindow.document;
    return {
        top:document22.documentElement.scrollTop || document22.body.scrollTop,
        left:document22.documentElement.scrollLeft || document22.body.scrollLeft,
        height:document22.documentElement.scrollHeight || document22.body.scrollHeight,
        width:document22.documentElement.scrollWidth || document22.body.scrollWidth
    }
}

(3)获取div滚动条

/***
 * Get scroll of div
 * @param divObj
 * @returns {{scrollHeight: (*|number), scrollWidth: (*|number)}}
 */
com.whuang.hsj.getDivScroll=function(divObj){
    if(typeof divObj == 'string'){
        divObj=com.whuang.hsj.$$id(divObj);
    }
    return {
        scrollHeight:divObj.scrollHeight,
        scrollWidth:divObj.scrollWidth
    }
}

(4)获取div的位置

/***
 * Get the Coordinate/Location of div
 * @param divObj
 * @returns {{width: number, height: number, left: *, top: Window}}
 */
com.whuang.hsj.divCoordinate=function(divObj){
    if(typeof divObj == 'string'){
        divObj=com.whuang.hsj.$$id('divObj');
    }
    return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
        'x':divObj.offsetLeft,'y':divObj.offsetTop,
        'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
}

参考:利用函数的惰性载入提高javascript代码性能

http://blogread.cn/it/article/7304?f=hot1

-------------- 2016年3月7日更新 --------------

跨浏览器设置滚动条的竖直位置

com.whuang.hsj.setTopScroll=function(top){
	if(document.documentElement.scrollTop){
		document.documentElement.scrollTop=top;
	}else if(document.body.scrollTop){
		document.body.scrollTop=top;
	}
};

跨浏览器设置滚动条的水平位置

com.whuang.hsj.setLeftScroll=function(left){
	if(document.documentElement.scrollLeft){
		document.documentElement.scrollLeft=left;
	}else if(document.body.scrollLeft){
		document.body.scrollLeft=left;
	}
};