js bom操作

概念

bom browser object model    提供与浏览器相关操作接口

封装的兼容性函数

<!-- 获取浏览器视口宽高 -->
function getViewportOffset() {
	if(window.innerWidth) {
		return {
			width: window.innerWidth,
			height: window.innerHeight
		}
	} else {
	//ie8及以下,分标准模式和混杂模式，混杂模式即是用老版本浏览器语法渲染代码
		if(document.compatMode == "BackCompat") {
			return {
				width: document.body.clientWidth,
				height: document.body.clientHight
			}	
		} else {
			return {
				width: document.documentElement.clientWidth,
				height: document.documentElement.clientHight
			}
		}
	}
}

<!-- 获取元素相对文档的距离 -->
function getElementPosition(target) {
	//target.offsetParent 最近的有定位的父元素，如无则返回body元素
	if (target.offsetParent == document.body) {
		return {
			x: target.offsetLeft,
			y: target.offsetTop
		}
	} else {
		return {
			x: target.offsetLeft + getElementPosition(target.offsetParent).x,
			y: target.offsetTop + getElementPosition(target.offsetParent).y
		}
	}
}

<!-- 求滚动条滚动距离 -->
function getScrollOffset() {
	if(window.pageXOffset) {
		return {
			x: window.pageXOffset,
			y: window.pageYOffset
		}
	} else {
	//ie8及以下，document.body.scrollLeft与document.documentElement.scrollLeft必有一为值，一为0
		return {
			x: document.body.scrollLeft + document.documentElement.scrollLeft,
			y: document.body.scrollTop + document.documentElement.scrollTop
		}
	}
}

控制窗口滚动

window.scroll(0, 100)    滚动条滚动100

window.scrollBy(0, -10)    滚动条累加滚动-10

利用这两个特性，可以做小说自动阅读功能，js部分代码如下：

var start = document.getElementsByClassName("start")[0];
	var stop = document.getElementsByClassName("stop")[0];
	var key = false;
	start.onclick = function () {
		if(key == false) {
		//需为全局变量，要不然离开该函数执行环境后引用timer找不到
			timer = setInterval(function() {
				window.scrollBy(0, 10);
			}, 100);
		}
		key = true;
	}
	stop.onclick = function () {
		if(key == true) { 
			clearInterval(timer);
			key = false;
		}
	}