鼠标滚轮实现屏幕滚动.docx

《鼠标滚轮实现屏幕滚动.docx》由会员分享，可在线阅读，更多相关《鼠标滚轮实现屏幕滚动.docx（5页珍藏版）》请在优知文库上搜索。

1、ScroIITop用法说明下面的演示中，外层元素的高度值是200px,内层元素的高度值是300PXC很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界之外，ScroIITop就等于这部分“不可见的内容”的高度。演示：（拖动滚动条，可以看到SCrOIlTOP值的变化）这些文字显示在内层元素中。ScroIITop值是:divstyle=,width:100px；height：300px；background-color：#FFFF00；nid=内层元素这些文字显示在内层元素中。解释：内层元素的高度值300px外层元素的高度值200px,因此

2、“外层元素的内容”（也就是“内层元素”）无法完全显示，而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上下方向的滑动条初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时ScroIITop属性的值为Oc当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，seeIIToP值就等于这些超出的部分。当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px,这也就是此时的ScroIITop值。通过js代码来读取，写入ScroIITo

3、p的值注意：ScroIITop的使用方式是element.scrollTop,而不是element.style.ScroIITop通过js代码来读取ScroIITop的值上面的演示实例中，其实已经用到了SCrolnop的读取操作。具体来说就是，在拖动滚动条的过程中，会读取此时的SCroIrroP的值，并在下方文字中显示出来。上面的演示实例的完整原码：divstyle=nwidth：200px；height-200px；background-color-#999999；overflow-auto；nid=外层元素，这些文字显示在内层元素中。scrollTop值是：VSPanid=演示元素Scro

4、llTop的值”vspanvpvar外层元素_div=document.getElementById（外层元素）；外层元素_diVQnscroll=读取ScrollTop的值并显示出来；注册OnSCron事件处理函数。当拖动滚动条时，会产生OnSCroIl事件varspan_演示元素ScrollTop的值二document.getElementById（演示元素ScrollTop的值）；/onscroll事件的处理函数function读取ScrollTop的值并显示出来0span演示元素ScrollTop的值.innerHTML=外层元素_div.ScrollTop；读取“外层元素”此时的Sc

5、rollTop的值并显示出来）读取ScrollTop的值并显示出来0；页面加载完成后，执行一次此函数。显示最初的scr。UToP值，此时的值为0解释：当拖动“外层元素的滚动条”时，会产生OnSCrOll事件。为这个事件注册一个名为读取SerOlITOP的值并显示出来的处理函数在读取ScroIITop的值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得至ij“外层元素”当时的ScroIITop的值，并显示在页面上。通过js代码来设置ScroIITop的值对上面的演示例子作一些修改。添加功能：通过js语句来设置SCrOIlTOP的值示例：这些文字显示在内层元素中。ScroI

6、ITDp值是：把Scrolllbp设为50把ScroIITop设为500输入ScroIITDp的值:确定上面的演示实例的完整原码：这些文字显示在内层元素中。scrollTop值是：VSPanid=外层元素A的ScrollTop的值xspanvpft!scrollTop设为50把ScrollTop设为500vp输入ScrollTop的值:VinPUttype=textid=输入ScrollTop的值“value=/确定vardiv_外层元素A=document.getElementById（外层元素A）；div_外层元素A.onscroll=读取ScrollTop的值并显示出来；注册OnSCro

7、n事件处理函数。当拖动滚动条时，会产生OnSCrOn事件varSPan_外层元素A的ScrollTop的值二document.getElementById（外层元素A的ScrollTop的值）；/onscroll事件的处理函数function读取ScrollTop的值并显示出来Ospan外层元素A的ScrollTop的值.innerHTML=divk层元素A.scrollTop；读取“外层元素”此时的scrollTop的值并显示出来）读取scrollTop的值并显示出来0；页面加载完成后，执行一次此函数。显示最初的SCrOIIToP值，此时的值为0div_外层元素A.scrollTop=10；

8、通过js语句来设置scrollTop的值,本条语句会触发OnSCroIl事件，使得读取scrollTop的值并显示出来”函数执行一次。function设置scrollTop的值0if（,n!=document.getElementById（uyscrollTop的值）.value）div_外层元素A.ScrollTop=document.getElementById（输入scrollTop的值）.value；elsealert（请输入一个数值）；解释：形如div_外层元素A.scrollTop=12345;的赋值语句会触发OnSeroll事件，使得读取scrollTop的值并显示出来函数执行一

9、次上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=1OOpx,这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，SCrolITOP会自动把它转变为WO0例如上面的“把ScroIITop设为500”按钮，ScroIITop会把500转变为10OC得到body元素的ScroIITopbody元素的ScroIITop是超出“浏览器窗口上边界”的内容的高度当html文档头部包含有文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而documet.body.scrollTDp的值为

10、0解释：形如div_外层元素A.scrolllbp=12345;的赋值语句会触发OnSCroIl事件，使得读取ScroIITop的值并显示出来函数执行一次上一个例子中已经提到：当拖动滚动条到最底部时，scrolllbp=300px-200px=100px,这是ScroIITop能够取的最大值。当用更大的值赋给ScroIITop时，SCrOInop会自动把它转变为100例如上面的“把ScroIITop设为500”按钮，Scrolllbp会把500转变为10O3得到body元素的ScroIITopbody元素的ScroIITop是超出“浏览器窗口上边界”的内容的高度当html文档头部包含有文档类型

11、声明”时，需要用document.documetElemet.scrollTop获得正确的值，而document.body.scrollTop的值为0alert(,document.documentElement.scrollTop,+document.documentElement.scrollTDp正确的值”+,document.body.scrolllbp+document.body.scrollTDp，值为0)；当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrol

12、llbp的值为0下面定义的get_scrollTop_OLbOdy()方法可以处理这种差异functionget_scrollTop_of_body()varScrolllbp;if(typeofwindow.pageYOffset!=undefined)(SCroIlTbP=window.pageYOffset;)elseif(patMode!=undefined&patMode!=,BackCompat)ScroIITop=document.documentElement.scrollTop;elseif(typeofdocument.body!=undefined,)ScroIITop=document.body.scrolllbp;returnscrolllbp;