默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业务逻辑,这是该怎么做呢?
只适用有两个滚动事件共存时适用,当有多个的时候不推荐使用这个方法,有多个会被覆盖
window.onscroll=function(){ //默认一个页面只能同时存在一个window.onscroll函数
console.log(11);
}
var oldMethod = window.onscroll; //当使用多个时建议使用这个方法或下面的方法
if(typeof oldMethod == 'function'){
window.onscroll = function(){
oldMethod.call(this);
console.log(22);
}
}
function addEvent(obj,type,fn){
if(obj.attachEvent){ //ie
obj.attachEvent('on'+type,function(){
fn.call(obj);
})
}else{
obj.addEventListener(type,fn,false);
}
}
addEvent(window,'scroll',function(){
console.log(21)
});
addEvent(window,'scroll',function(){
console.log(22)
});
jquery已经帮我们写好了一切
$(window).scroll(()=>{console.log(31)})
$(window).scroll(()=>{console.log(32)})
对于同一元素,绑定多个事件,生效问题总结如下:
1)使用onclick方式,只能最后一个事件生效;
2)使用jquery、或者addEventListener,可以使多个事件生效;
<!doctype html>
<html>
<head>
<title>throttle测试</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效
document.getElementById('clickme').onclick = function (e) {
console.log("123");
};
document.getElementById('clickme').onclick = function (e) {
console.log("234");
};
//使用addEventListener/attachEvent绑定,可以是多个事件顺序生效
document.getElementById('clickme').addEventListener('click',function (e) {
console.log("123");
});
document.getElementById('clickme').addEventListener('click',function (e) {
console.log("321");
});
//使用jquery绑定,可以是多个事件顺序生效
$("#clickme").click(function() {
console.log(111);
});
$("#clickme").click(function() {
console.log(222);
});
});
</script>
</head>
<body>
<div id="clickme">CLICK ME</div>
</body>
</html>
BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。
基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。
原生js获取滚动条在Y轴上的滚动距离、获取文档的总高度、获取浏览器视口的高度的方法实现,用于判断页面加载数据。
iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。
把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。
window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。
这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下
在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。
当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!