js滚动条事件:
<div> 元素滚动时执行 JavaScript
<div onscroll="myFunction()">
onscroll 事件在元素滚动条在滚动时触发。
提示: 使用 CSS overflow 样式属性来创建元素的滚动条。
jquery滚动条事件:
对元素滚动的次数进行计数:
$("div").scroll(function() { $("span").text(x+=1); });
定义和用法
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现。
1.scroll()事件
当用户滚动指定的元素时,会发生scroll事件。适用于所有可滚动的元素和window对象(浏览器窗口)
$(select).scroll([Data],fn);
当(浏览器窗口)页面滚动条变化时,执行的函数,JQuery代码:
$(window).scroll(function(){ //do something... });
2.scrollTop 获取匹配元素相对滚动条顶部的偏移
scrollTop(val)
获取页面滚动条的具体值:$(document).scrollTop();
设置相对滚动条的偏移值:$(document).scrollTop(300);
3.offset() 获取匹配元素在当前视口的相对偏移。
offset([coordinates])
获取元素的相对偏移:$(".bg02").offset().top;
设置元素的相对偏移:$(".bg02").offset({"top":1000, "left":0});
4.需求:当(浏览器窗口)页面滚动条值小于300px时隐藏div,大于300px时显示div
$(window).scroll(function(){ //var ds = document.documetElement.scrollTop || document.body.scrollTop; //js兼容获取滚动条 if($(document).scrollTop() < 300){ $(".position").css({"display":"none"}); }else{ $(".position").css({"display":"block"}); } });
5.返回顶部和元素定位(1-10)
$(".position ul li").click(function(){ var num_index = $(this).index() + 1; if(num_index < 10){ $("html,body").animate({scrollTop:$(".bg0" + num_index).offset().top},800); }else if(num_ineex ==10){ $("html,body").animate({$(".bg"+num_index).offset().top},800); }else if(num_index == 11){ $("html,body").animate({scrollTop:0},800); }else{ return false; } });
js例子:
<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a> #scrollup{ background: #777; color:#eee; font-size: 40px; text-align: center; text-decoration: none; bottom:65px; right:20px; overflow: hidden; width:46px; height:46px; border:none; opacity:.8; &:active{opacity:.7;} } <script type="text/javascript"> window.onscroll= function(){ //变量t是滚动条滚动时,距离顶部的距离 var t = document.documentElement.scrollTop||document.body.scrollTop; var scrollup = document.getElementById('scrollup'); //当滚动到距离顶部200px时,返回顶部的锚点显示 if(t>=200){ scrollup.style.display="block"; }else{ //恢复正常 scrollup.style.display="none"; } } </script>
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛