javascript --视口

  浏览器的视口可以看作是浏览器滚动条内的一切东西，视口还包含的部分组件是视口窗口，叶面和滚动条等。获取这些组件的正确位置和尺寸，对于开发显示很长的内容（比如自动滚动和聊天室）的交互来说是必须的。

1，页面尺寸

确定当前页面高度和宽度的两个函数

function pageHeight() { return document.body.scrollHeight; } function pageWidth() { return document.body.scrollWidth; }

2 滚动条的位置

接下来要如何确定浏览器滚动条的位置（也就是说，叶面相对于视口的顶端距离）

如下两个函数：

function scrollX() { var de=document.documentElement; return self.pageXoffset||(de&&de.scrollLeft)||document.body.scrollLeft; } function scrollY() { var de=document.documentElement; return self.pageYoffset||(de&&de.scrollTop)||document.body.scrollTop; }

3 移动滚动条

现在已经知道了页面内滚动条的当前偏移量和页面本身的尺寸，那么可以用scroolTo方法了，它由浏览器自身提供，可以用来调整液面视口的当前位置。

scrollTo方法作为window对象（和其他包含滚动内容的元素或者iframe）的一个属性而存在，它带有两个参数，xy偏移量，可以滚动到视口（元素或者iframe）指定位置。

4 视口尺寸

确定浏览器视口的高度和宽度的两个函数

function windowHeight() { var de=document.documentElement; return self.innerHeight||(de&&de.clientHeight)||document.body.clientHeight; } function windowWidth { var de=document.documentElement; return self.innserWidth||(de&&de.clientWidth)||document.body.clientWidth; }