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个，细微有点儿差别。

 

====完毕====

====完毕====

====完毕====

P

p

o