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

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

6.应用:

1.要完成点击列表展开后再收起时,滚动条回到原来浏览的位置,可以
首先用window.pageX等获取,记录初始动条距离,再用scrollTo设定回之前记录的地方
2.自动阅读器的功能 用scrollBy实现

7.查询浏览器遵循标准

document.compatMode
"CSS1Compat" ----标准模式,一般来说都这个
"BackCompat" ----向后兼容模式,删掉这句就变成此模式

你可能感兴趣的:(js底层基础系列)