js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下：
在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部”
js网页滚动条滚动事件
<style type="text/css">
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
</style>
<script type="text/javascript">
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
</script>
<a name="top">顶部<a>
<div id="top_div"><a href="#top">返回顶部</a></div>
<br />
<br />
<div>
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去
</div>
例子语法解释
在 style 标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键
javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑
当滚动超过 300 （像素）时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)
必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度
PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：
javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍js操作滚动条事件实例，包括了js操作滚动条事件实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js操作滚动条事件的方法。分享给大家供大家参考。具体分析如下： 之前一直很纳闷，如何监视滚动条的事件，今天终于有点明白了。 下边代码，是监听滚动条只要移动，下方的返回顶部的div显示与隐藏的代码 注： t：滚动条距离top端的距离 t>0,即滚动条一旦滚动，立即执行if（）语句
-
本文向大家介绍js滚轮事件 js自定义滚动条的实现，包括了js滚轮事件 js自定义滚动条的实现的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现滚动条滚动到页面底部继续加载，包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项，需要的朋友参考一下 这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果
-
我已经在我的页面上实现了平滑滚动条，它的工作相当不错，但我也想在滚动内容中添加一些过渡效果。基本上，我想在一个滚动事件上做这件事，但我不知道scrollbar的工作有多流畅，以及在滚动事件上执行什么对象。我检查了#my-scrollbar没有执行此操作： 滚动事件的原因是什么？或者有没有其他的方法可以做一些额外的效果而不检查滚动事件？ 编辑：我正在粘贴我的代码（我正在使用react.js）来进行更
-
本文向大家介绍JS实现判断滚动条滚到页面底部并执行事件的方法，包括了JS实现判断滚动条滚到页面底部并执行事件的方法的使用技巧和注意事项，需要的朋友参考一下 需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。 clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部
-
本文向大家介绍JS JQUERY实现滚动条自动滚到底的方法，包括了JS JQUERY实现滚动条自动滚到底的方法的使用技巧和注意事项，需要的朋友参考一下 设置页面加载时滚动条自动滚到底的方法： jQuery： JavaScript： 以上2种方法均可以实现页面加载时滚动条自动滚动到底，小伙伴们根据自己的实际需求，自由选择吧