js 滚动条 scroll属性/事件 兼容滚动条方法 获取滚动条信息 操作滚动条(scroll() scrollTo() scrollBy()) 获取窗口滚动条偏移量

scroll属性

可以获取该元素的大小滚动距离

ele.scrollTop 返回元素被卷去的上侧距离 不带单位
ele.scrollLeft 返回元素被卷去的左侧距离 不带单位
ele.scrollWidth 返回自身实际的宽度 不含边框 不带单位
ele.scrollHeight 返回自身实际的高度 不含边框 不带单位

scroll事件

ele.addEventListener("scroll",function(){})

获取滚动条信息

window.pageXOffset/pageYOffset x轴/y轴 滚动距离 IE8及以下不兼容
IE8 及以下浏览器 支持
兼容性比较混乱 用时取2个值相加，因为两个值不可能同时存在 一个存在，另一个必然为0
document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop

封装 兼容滚动条方法 获取页面的滚动信息

function getScrollOffset(){
	if(window.pageXOffset){
		return {
			x:window.pageXOffset,
			y:window.pageYOffset
		}
	}else{
		return {
			x:document.body.scrollLeft + document.documentElement.scrollLeft,
			y:document.body.scrollTop + document.documentElement.scrollTop
		}
	}
}

function getScrollOffset(){
	return {
		x:window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
		y:window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
	}
}

操作滚动条 scroll() scrollTo() scrollBy()

window 有三个方法
scroll() scrollTo() scrollBy()
3个方法功能类似，用法都是将 x,y传入，即实现让滚动条滚动到当前位置
区别，scrollBy()会在之前的数据上累加

window.scroll(0,1000)
// 等同
window.scrollTo(0,1000)

//---------------------------------
window.scrollBy(0,100)

// 滚动平滑
window.scroll({
  top: 100,
  left: 0,
  behavior: 'smooth' // 'smooth' : 'auto'
});

可以实现自动阅读

获取窗口滚动条偏移量

/**
 * 获取窗口滚动条偏移量
 * @param {Object} w 浏览器窗口对象
 * @returns {Object} 以一个对象的x和y属性返回滚动条的偏移量
 */
function getScrollOffsets(w) {
    //使用指定窗口，不传则默认使用当前窗口
    w = w || window;

    //主流浏览器
    if (w.pageXOffset != null) {
        return { x: w.pageXOffset, y: w.pageYOffset };
    }

    //兼容标准模式下的IE
    var d = w.document;
    if (document.compatMode == 'CSS1Compat') {
        return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
    }

    //兼容怪异模式下的浏览器
    return { x: d.body.scrollLeft, y: d.body.scrollTop};
}