javascript_scrollbar_scroll的统制_总结 _JavaScript

javascript_scrollbar_scroll的控制_总结

javascript scrollbar scroll的控制 scrollTo scrollBy scroll?总结

#得到当前的窗口的位置

分别使用如下的方法：

document.body.scrollHeight?当前窗口滚动条栏的高度，窗口大小不变时，是不变的

document.body.scrollWidth 当前窗口滚动条栏的宽度，窗口大小不变时，是不变的

document.body.scrollTop 滚动条距离顶部的距离

document.body.scrollLeft?滚动条距离左侧的距离

测试方法：

<script type="text/javascript">
    function seeScroll(dom){
        var scrollResult =
            "scrollHeight=" + document.body.scrollHeight + "\n" +
                    "scrollTop=" + document.body.scrollTop + "\n" +
                    "scrollLeft=" + document.body.scrollLeft
                    + "\n" +
                    "scrollWidth=" + document.body.scrollWidth
                    + "\n" +
                    "jq_scrollTop=" + $(dom).scrollLeft();//jquery这个不好用么
                    + "\n" +
                    "jq_scrollLeft=" + $(dom).scrollLeft()
            ;
        alert(scrollResult);
    }
</script>

#控制滚动条

分别使用如下的方法：

scrollBy 方法?

语法格式：?

window.scrollBy( 水平位移量，垂直位移量 )?

功能：将窗口中的内容按给定的位移量滚动。参数为正数时，正向滚动，否则反向滚动。?

scrollTo 方法?

语法格式：?

window.scrollTo(x,y)?

功能：将窗口中的内容滚动到指定位置。?

scroll 事件

语法格式：?
window.scroll(X?坐标?,Y?坐标?)?
功能：将窗口移动到指定的坐标位置。

使用这个的一个用例：

产品部要求，用户点击这个页面后，鼠标仍旧停留在这个位置，即鼠标不需要移动。

技术：用户点击一个按钮后，页面ajax已经重新渲染了一部分，导致窗口大小已经变化，这个时候，要满足上面的需求，就得计算渲染后的高度差，使用scroll来控制。方法有上面3个，细微有点儿差别。

====完毕====