Window的其他操作

1.浏览器的尺寸 - 包含滚动条

// 高度

window.innerHeight

 

// 宽度

window.innerWidth

 

console.log( innerHeight,innerWidth );

 

2.window的事件

 window.onload = function(){

 // 当前页面所有内容都加载完成以后，再加载这个事件

 }

// 只要浏览器的尺寸发生了改变，这个事件就会执行
 window.onresize = function(){
 console.log("改变了");
 }

 

// 只要浏览器的滚动条滚动了，就会执行
 window.onscroll = function(){
 console.log("滚动了");
 }

 

2.浏览器滚动的距离

获取文档向下滚动的距离，以下两个都可以：

• document.documentElement.scrollTop

• document.body.scrollTop

window.onscroll = function () {
  var t = document.documentElement.scrollTop;
  console.log(t);
  var t1 = document.body.scrollTop;
  console.log(t1);
}

注意：这两个的区别在于当前文档有没有doctype，有就用document.documentElement.scrollTop，没有就用document.body.scrollTop

 

获取页面向右滚动的距离：

 

• document.body.scrollLeft

• document.documentElement.scrollLeft

 

使用方式同上。

 

这两个方法在ie和edge下有兼容性问题。

 

使用兼容写法：

var t = document.documentElement.scrollTop || document.body.scrollTop;
var t = document.documentElement.scrollLeft || document.body.scrollLeft;