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

scrollTop用法说明下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素 中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有局部内容会隐没在“外层元素的上边 界”之外，scrollTop就等于这局部不可见的内容”的高度。 演示：（拖动滚动条，可以看到scrollTop值的变化）这些文字显示在内层元素中。 scrollTop 值是： div style=width：200px；height：200px；background-color：#999999；overflow：auto； id=k 层元素”,div style=width：100px；height：300px；background-color：#FFFF00；n id=内层元素”〉 这些文字显示在内层元素中。 /div/div 解释： 内层元素的高度值300Px 外层元素的高度值200Px，因此“外层元素的内容”（也就是“内层元 素”）无法完全显示，而外层元素把overflow设置为auto,因此外层元素的右侧会出现一个上 下方向的滑动条初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的 上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超 出的局部。 当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的 上边界”的内容的高度=300px-200Px=100px,这也就是此时的scrollTop值。 通过js代码来读取，写入scrollTop的值注意：scrollTop 的使用方式是 element.scrollTop,而不是 通过js代码来读取scrollTop的值上面的演示实例中，其实已经用到了 scrollTop的读取操作。具体来说就是，在拖动滚动条的 过程中，会读取此时的scrollTop的值，并在下方文字中显示出来。 上面的演示实例的完整原码： div style=width：200px；height：200px；background-color：#999999；overflow：auto； id=外 层元素,div style=nwidth：100px；height：300px；background-color：#FFFF00；n id=内层元素”〉 这些文字显示在内层元素中。 /div/div pscrollTop 值是：span id=演示元素 scrollTop 的值”v/spanv/pscript type=utext/javascriptn var 外层元素_div = document.getElementByld（外层元素）；外层元素_div.onscroll二读取scrollTop的值并显示出来； 〃〃注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件var span_演示元素 scrollTop 的值=document.getElementByld（演示元素 scrollTop 的值 ）； //onscroll事件的处理函数function读取scrollTop的值并显示出来0 {span_演示元素 scrollTop 的值.innerHTML=外层元素_div.scrollTop；〃读取“外层元素”此时的scrollTop的值并显示出来 ）读取scrollTop的值并显示出来0； 〃页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0/script 解释： 当拖动“外层元素的滚动条”时，会产生onscroll事件。为这个事件注册一个名为读取scrollTop 的值并显示出来的处理函数在读取scrollTop的值并显示出来这个事件处理函数中，通过外层元素_div.scrollTop得至『外 层元素”当时的scrollTop的值，并显示在页面上。 通过js代码来设置scrollTop的值对上面的演例如子作一些修改。添加功能：通过js语句来设置scrollTop的值 例如： 这些文字显示在内层元素中。 scrollTop 值是: 把 scrollTop 设为 50 把 scrollTop 设为 500输入scrollTop的值:确定 上面的演示实例的完整原码： div style=width：200px；height：200px；background-color：#999999；overflow：auto；id=^k 层元素Adiv style=width：100px；height：300px；background-color：#FFFF00『 id=内层元素 A 这些文字显示在内