原生js底层基础（十八）JavaScript 滚动条距离、可视区域宽高、元素尺寸、让滚动条移动

最新推荐文章于 2023-11-07 14:47:49 发布

菠萝油姐姐

最新推荐文章于 2023-11-07 14:47:49 发布

阅读量1.3k

点赞数 2

分类专栏： js底层基础系列文章标签： js 滚动条操作可视区域宽高 js 滚动条移动

本文链接：https://blog.csdn.net/weixin_43748192/article/details/102856428

版权

js底层基础系列专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.获取滚动条距离

window.pageXOffset ( pageYOffset )(IE8及IE8以下不兼容)
IE8及IE8以下能兼容的方法
1.document.body.scrollLeft ( scrollTop )
2.document.documentElement.scrollLeft (scrollTop )
两个方法的兼容性比较混乱，但是他们两个互斥，不会两个同时兼容，所以用的时候用两个相加的值就可以了

封装获取滚动条距离的方法（兼容）

function getScrollOffset() {
    if (window.pageXOffset) { //IE9及以上  jquery中 --targt.offset().top
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else { //兼容IE8及IE8以下 
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

2.可视区域宽高

即用户肉眼可见的区域的宽高

window.innerWidth( innerHeight )(IE9及以上才兼容)
document.documentElement.clientWidth ( clientHeight ) (标准模式下任何浏览器都可以)
document.body.clientWidth ( clientHeight )(怪异模式下的浏览器)

封装获取可视区宽高的方法（兼容）

function getViewPortOffset() {
    if (window.innerWidth) { //IE9及以上	，条件可以变为0 && window.innerWidth调试
        return {
            x: window.innerWidth,
            Y: window.innerHeight
        }
    } else { //IE8及以下也兼容
        if (document.compatMode == "BackCompat") {
            return { //标准模式
                x: document.body.clientWidth,
                y: document.body.clientHeight
            }
        } else {
            return { //怪异模式
                x: document.documentElement.clientWidth,
                y: document.documentElement.clientHeight
            }
        }
    }
}

3.元素尺寸

元素宽高（包含padding border ）：element.offsetWidth/offsetHeight
元素的top/left：element.offsetTop/offsetLeft
对于无定位父级的元素，返回的是相对文档的距离，对于有定位父级的元素，返回的是相对于最近的父级的距离的坐标
元素父级：ele.offsetParent
返回最近的有定位的父级,如无，返回body

4.让滚动条滚动

（1）指定滚动条移动至哪个位置（以下两个方法一样，选一即可）

window.scroll(x,y)
windowscrollTo(x,y)
例如window.scroll(0,500), 滚动条定位到坐标0，500的地方

（2）基于当前位置，累加指定距离移动

scrollBy()
例如，window.scrollBy(0,10);
一个最经典的应用便是电子书的自动阅读功能了，以下做简单示例

var start = document.getElementsByClassName('start')[0];
	var stop = document.getElementsByClassName('stop')[0];
	var timer = 0;
	var flag = true;//开关，执行完定时器就把开关锁住，避免多次点击开始按钮加速，当单击停止后，再把锁打开

	start.onclick = function(){
		if(flag){
			timer = setInterval(function(){
				console.log(22)
				window.scrollBy(0,10);
			},100)
			flag = false;
			
		}
	}
	stop.onclick = function(){
		clearInterval(timer)
		flag = true;
	}