鼠标滚轮实现屏幕滚动

1、scrollTop用法说明下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素 中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有局部内容会隐没在“外层元素的上边 界”之外，scrollTop就等于这局部不可见的内容”的高度。演示：（拖动滚动条，可以看到scrollTop值的变化）这些文字显示在内层元素中。scrollTop 值是：div style=width：200px；height：200px；background-color：#999999；overflow：auto； id=k 层元素”,div style=width：100px；hei

2、ght：300px；background-color：#FFFF00；n id=内层元素” 这些文字显示在内层元素中。解释：内层元素的高度值300Px 外层元素的高度值200Px，因此“外层元素的内容”（也就是“内层元 素”）无法完全显示，而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上 下方向的滑动条初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的 上边界”，此时scrollTop属性的值为0。当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超 出的局部。当拖动滚动条到最底部时，“内

3、层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的 上边界”的内容的高度=300px-200Px=100px,这也就是此时的scrollTop值。通过js代码来读取，写入scrollTop的值注意：scrollTop 的使用方式是 element.scrollTop,而不是 通过js代码来读取scrollTop的值上面的演示实例中，其实已经用到了 scrollTop的读取操作。具体来说就是，在拖动滚动条的 过程中，会读取此时的scrollTop的值，并在下方文字中显示出来。上面的演示实例的完整原码：div style=width：200px；height：200px；backgrou

4、nd-color：#999999；overflow：auto； id=外 层元素,div style=nwidth：100px；height：300px；background-color：#FFFF00；n id=内层元素” 这些文字显示在内层元素中。scrollTop 值是：v/spanv/pvar 外层元素_div = document.getElementByld（外层元素）；外层元素_div.onscroll二读取scrollTop的值并显示出来；注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件var span_演示元素 scrollTop 的值=docum

5、ent.getElementByld（演示元素 scrollTop 的值 ）；/onscroll事件的处理函数function读取scrollTop的值并显示出来0span_演示元素 scrollTop 的值.innerHTML=外层元素_div.scrollTop；读取“外层元素”此时的scrollTop的值并显示出来）读取scrollTop的值并显示出来0；页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0解释：当拖动“外层元素的滚动条”时，会产生onscroll事件。为这个事件注册一个名为读取scrollTop 的值并显示出来的处理函数在读取scrollTop的

6、值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得至外 层元素”当时的scrollTop的值，并显示在页面上。通过js代码来设置scrollTop的值对上面的演例如子作一些修改。添加功能：通过js语句来设置scrollTop的值例如：这些文字显示在内层元素中。scrollTop 值是:把 scrollTop 设为 50 把 scrollTop 设为 500输入scrollTop的值:确定上面的演示实例的完整原码： 这些文字显示在内层元素中。scrollTop 值是：span id=外层元素 A 的 scrollTop 的值v/p把 scrollTop 设为 50 把 s

7、crollTop 设为 500输入 scrollTop 的值:input type=text id=输入 scrollTop 的值value=/确定 var div_外层元素 A = document.getElementByld（外层元素 A）；div_外层元素A.onscroll二读取scrollTop的值并显示出来；/注册。nscroll事件处理函数。当拖动滚动条时，会产生onscroll事件var span_外层元素 A 的 scrollTop 的值=document.getElementByld（外层元素 A 的 scrollTop 的值”）； /onscroll事件的处理函数fun

8、ction读取scrollTop的值并显示出来0span_外层元素 A 的 scrollTop 的值.innerHTML=div_外层元素 A.scrollTop；读取“外层元素”此时的scrollTop的值并显示出来）读取scrollTop的值并显示出来0；页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0div_外层元素 A.scrollTop = 10；通过js语句来设置scrollTop的值，本条语句会触发onscroll事件，使得”读取scrollTop的值 并显示出来”函数执行一次。function 设置 scrollTop 的值0if（n != docu

9、ment.getElementByld（输入 scrollTop 的值）.value）div_外层元素 A.scrollTop = document.getElementById（,I A scrollTop 的值）.value；else alert（请输入一个数值）； 解释：形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop 的值并显示出来函数执行一次上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px,这是 scrollTop能够取的最大值。当用更大的值赋给scroll

10、Top时，scrollTop会自动把它转变为100。 例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100。得到body元素的scrollTopbody元素的scrollTop是超出“浏览器衡U上边界”的内容的高度当html文档头部包含有“文档类型声明”时，需要用获 得正确的值，而的值为0解释：形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop 的值并显示出来函数执行一次上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px,这是 scr

11、ollTop能够取的最大值。当用更大的值赋给scrollTop时，scrollTop会自动把它转变为100。 例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100.得至ij body元素的scrollTopbody元素的scrollTop是超出“浏览器窗n上边界”的内容的高度当html文档头部包含有“文档类型声明”时，需要用获得正确的值，而的值为0alert(document.documentElement.scrolllbp:+document.documentElement.scrollTop /正 确的值+document.body.scrollTop:+document.body.scrollTDp 值为 0)；当html文档头部不包含任何“文档类型声明”时，需要用获得正确的值， 而 document.documentElement.scroinbp 的值为 0下面定义的get_scrollTop_of_body()方法可以处理这种差异function get_scrollTop_of_body()var scrolllbp;if(typeof window.pageYOffset != undefined)scrollTop = window.pageYOffset;)elseif(typeof document patMode