鼠标滚轮实现屏幕滚动.docx
ScroIITop用法说明下面的演示中，外层元素的高度值是200px,内层元素的高度值是300PXC很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界'之外，ScroIITop就等于这部分“不可见的内容”的高度。演示：（拖动滚动条，可以看到SCrOIlTOP值的变化）这些文字显示在内层元素中。ScroIITop值是:<divstyle=,width：200px；height：200px；background-color-#999999；overflow：auto；nid="外层元素”><divstyle=',width:100px；height：300px；background-color：#FFFF00；nid="内层元素这些文字显示在内层元素中。<div><div>解释：内层元素的高度值300px>外层元素的高度值200px,因此“外层元素的内容”（也就是“内层元素”）无法完全显示，而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上下方向的滑动条初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时ScroIITop属性的值为Oc当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，seeIIToP值就等于这些超出的部分。当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px,这也就是此时的ScroIITop值。通过js代码来读取，写入ScroIITop的值注意：ScroIITop的使用方式是element.scrollTop,而不是element.style.ScroIITop通过js代码来读取ScroIITop的值上面的演示实例中，其实已经用到了SCrolnop的读取操作。具体来说就是，在拖动滚动条的过程中，会读取此时的SCroIrroP的值，并在下方文字中显示出来。上面的演示实例的完整原码：<divstyle=nwidth：200px；height-200px；background-color-#999999；overflow-auto；nid="外层元素，<divstyle=Hwidth：100px；height：300px；background-colorWFFF00；nid="内层元素”>这些文字显示在内层元素中。<div><div><p>scrollTop值是：VSPanid="演示元素ScrollTop的值”>vspan>vp><scripttype=,textjavascript,>var外层元素_div=document.getElementById（"外层元素"）；外层元素_diVQnscroll=读取ScrollTop的值并显示出来；注册OnSCron事件处理函数。当拖动滚动条时，会产生OnSCroIl事件varspan_演示元素ScrollTop的值二document.getElementById（"演示元素ScrollTop的值"）；/onscroll事件的处理函数function读取ScrollTop的值并显示出来0span演示元素ScrollTop的值.innerHTML=外层元素_div.ScrollTop；读取“外层元素”此时的ScrollTop的值并显示出来）读取ScrollTop的值并显示出来0；页面加载完成后，执行一次此函数。显示最初的scr。UToP值，此时的值为0<script>解释：当拖动“外层元素的滚动条”时，会产生OnSCrOll事件。为这个事件注册一个名为读取SerOlITOP的值并显示出来的处理函数在读取ScroIITop的值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得至ij“外层元素”当时的ScroIITop的值，并显示在页面上。通过js代码来设置ScroIITop的值对上面的演示例子作一些修改。添加功能：通过js语句来设置SCrOIlTOP的值示例：这些文字显示在内层元素中。ScroIITDp值是：把Scrolllbp设为50把ScroIITop设为500输入ScroIITDp的值:确定上面的演示实例的完整原码：<divstyle=,'width200px5height200px5background-color999999Joverflowauto;"id="外层元素A'><divStyIe="Width：100px；height：300px；background-color：#FFFFoO/id="内层元素A,>这些文字显示在内层元素中。<div><div><p>scrollTop值是：VSPanid="外层元素A的ScrollTop的值"xspan>vp><p><buttontype=button,'OnCliCk="div外层元素A.scrollTop=50J">ft!scrollTop设为50<button><buttontype=,buttonOnCIiCk="div_外层元素A.scrollTop=500J>把ScrollTop设为500<button><p>vp>输入ScrollTop的值:VinPUttype="text"id="输入ScrollTop的值“value=""/><buttontype=',buttonnOnCliCk="设置ScrollTop的值O"name="设置ScrollTop的值”>确定<button><p><scripttype=,textjavascript,>vardiv_外层元素A=document.getElementById（"外层元素A"）；div_外层元素A.onscroll=读取ScrollTop的值并显示出来；注册OnSCron事件处理函数。当拖动滚动条时，会产生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；通过js语句来设置scrollTop的值,本条语句会触发OnSCroIl事件，使得"读取scrollTop的值并显示出来”函数执行一次。function设置scrollTop的值0if（',n!=document.getElementById（uyscrollTop的值"）.value）div_外层元素A.ScrollTop=document.getElementById（"输入scrollTop的值"）.value；elsealert（"请输入一个数值"）；<script>解释：形如div_外层元素A.scrollTop=12345;的赋值语句会触发OnSeroll事件，使得读取scrollTop的值并显示出来函数执行一次上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=1OOpx,这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，SCrolITOP会自动把它转变为WO0例如上面的“把ScroIITop设为500”按钮，ScroIITop会把500转变为10OC得到body元素的ScroIITopbody元素的ScroIITop是超出“浏览器窗口上边界”的内容的高度当html文档头部包含有"文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而documet.body.scrollTDp的值为0解释：形如div_外层元素A.scrolllbp=12345;的赋值语句会触发OnSCroIl事件，使得读取ScroIITop的值并显示出来函数执行一次上一个例子中已经提到：当拖动滚动条到最底部时，scrolllbp=300px-200px=100px,这是ScroIITop能够取的最大值。当用更大的值赋给ScroIITop时，SCrOInop会自动把它转变为100例如上面的“把ScroIITop设为500”按钮，Scrolllbp会把500转变为10O3得到body元素的ScroIITopbody元素的ScroIITop是超出“浏览器窗口上边界”的内容的高度当html文档头部包含有"文档类型声明”时，需要用document.documetElemet.scrollTop获得正确的值，而document.body.scrollTop的值为0<!DOCTYPEhtmlPUBLIC,W3CDTDXHTML1.0TransitionalEN",'httpwww.w3.orgTRxhtml1DTDxhtml1-transitional.dtd"><scripttype="textjavascript">alert(',document.documentElement.scrollTop,+document.documentElement.scrollTDp'正确的值”+,'document.body.scrolllbp'+document.body.scrollTDp，值为0")；<script>当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrolllbp的值为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;
