当前位置: 代码迷 >> JavaScript >> javascript_scrollbar_scroll的统制_总结
  详细解决方案

javascript_scrollbar_scroll的统制_总结

热度:204   发布时间:2012-09-01 09:33:03.0
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

?

?

?

  相关解决方案