JavaScript与CSS — 浏览器的视口

浏览器的视口（viewport）可以看作是浏览器滚动条内的一切东西。视口还包括的部分组件包括：视口窗口、页面和滚动条等。获取这些组件正确的位置和尺寸，对于开发很长的内容（比如自动滚动和聊天室等）的交互来说是必须的。
1. 页面尺寸
首先需要了解的属性是当前页面的高度和宽度。下面的两个函数使用了scrollWidth和scrollHeight属性，它们指明了元素的潜在宽度和高度，而不只是当前所看到的尺寸。

// 返回页面的高度
function pageHeight() {
    return document.body.scrollHeight;
}

// 返回页面的宽度
function pageWidth() {
    return document.body.scrollWidth;
}

2. 滚动条的位置
滚动条的位置（也就是页面相对于视口的距离），获取这些位置对于开发超越浏览器默认滚动的动态应用程序是必要的。

//浏览器水平滚动位置的函数
function scrollX() {
    // 用于IE6/7 的严格模式
    var de = document.documentElement;

    // 如果存在 pageXOffset 则使用它
    return self.pageXOffset ||

        // 否则，尝试获取根节点的左端滚动的偏移量
        ( de && de.scrollLeft ) ||

        // 最后，尝试获取body 元素的左端滚动的偏移量
        document.body.scrollLeft;
}

// 浏览器垂直滚动位置的函数
function scrollY() {
    var de = document.documentElement;

    return self.pageYOffset ||
        ( de && de.scrollTop ) ||
        document.body.scrollTop;
}

3. scrollTo方法
scrollTo方法由浏览器自身提供，可以用来调整页面视口的当前位置。scrollTo作为window对象的属性，它有两个参数，即x和y偏移量。可以滚动到视口的指定位置。

// 滚动到页面的顶端
window.scrollTo(0,0);

// 滚动到指定的元素
window.scrollTo( 0, pageY( document.getElementById("body") ) );

4. 视口的尺寸
获取视口的尺寸就可以深入了解用户当前可以看到的内容有多少，而不必考虑用户的屏幕分辨率或者浏览器窗口的大小。

// 视口的高度
function windowHeight() {
    // 用于IE6/7 的严格模式
    var de = document.documentElement;

    // 如果浏览器存在 innerHeight 则使用它
    return self.innerHeight ||

        // 否则，尝试获取根节点的高度偏移量
        ( de && de.clientHeight ) ||

        // 最后，尝试获取body元素的高度偏移量
        document.body.clientHeight;
}

// 视口的宽度
function windowWidth() {
    var de = document.documentElement;

    return self.innerWidth ||
        ( de && de.clientWidth ) ||
        document.body.clientWidth;
}

通过对视口的操作，可以在高度交互的Web应用中提供更好的体验。

分享&收藏

转载请注明：陈童的博客 » JavaScript与CSS — 浏览器的视口