版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fanfanzk1314/article/details/79425641
<!--滚动条滚动垂直距离:window.pageYOffset 水平距离:window.pageXOffset 和document.boby.scrollLeft-->
function getScrollOffset() {
if (window.pageYOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
/*查看视口的尺寸 :window.innerHeight window.innerWidth*/
function getViewOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode == "BackCompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
/*查看元素的几何尺寸*/
var div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());
/*元素的尺寸(视觉): div.offsetWidth div.offsetHeight*/
/*查看元素的位置:document.offsetLeft document.offsetTop
* 对于无定位父级元素,返回相对于文档的坐标,对于有定位的父级元素返回相对于最近的有定位的父级的坐标
* */
/*让滚动条滚动:下面三个功能类似,用法类似将x,y坐标传人,即实现让滚动轮滚动到当前位置*/
window.scroll(0, 123);
window.scrollTo(0, 123);
// 会在原来的数据基础上做累加,也可以做阅读器
window.scrollBy(0, 123);
//这里是阅读器的模拟
var start = document.getElementsByTagName('div')[0];
var end = document.getElementsByTagName('div')[1];
var timer = 0;
var key = true; //这里是锁的机制
start.onclick = function () {
if (key){
timer = setInterval(function () {
window.scrollBy(0, 10);
}, 100);
key = false;
}
}
end.onclick = function () {
clearInterval(timer);
key = true;
}