美文网首页
滚动条的监听事件

滚动条的监听事件

作者: 伍超波 | 来源:发表于2017-09-06 09:18 被阅读0次

$(function() { // js部分开始

var scrolling =false;     //判断到底了

function isBottom() {

    var scrollTop =0;

    if ( document.documentElement  && document.documentElement.scrollTop ) {

     scrollTop = document.documentElement.scrollTop;

}else if ( document.body ) {

    scrollTop =document.body.scrollTop;//滚动条高度

}

 var clientHeight =document.documentElement.clientHeight;  //浏览器高度

var scrollHeight = Math.max( document.body.scrollHeight , document.documentElement.scrollHeight );  //内容区域的高度

return Math.abs(scrollTop + clientHeight - scrollHeight) <=50;   //高度差在50内可以判断到底了
}

//判断到顶部了

function isTop(){

    var scrollTop =0;

    if ( document.documentElement && document.documentElement.scrollTop) {

        scrollTop =document.documentElement.scrollTop;

    }  else if ( document.body) {

          scrollTop =document.body.scrollTop;

     }

     return scrollTop==0;

}

 function onFinish() {

   scrolling =false;

 }

function onScroll() {   //定义当前滚动的区域

var scrollTop =me._param.config.scroller

    ?jQuery(me._param.config.scroller).scrollTop()    //自己设置的滚动区域

    : jQuery(document).scrollTop();    //浏览器的滚动区域

if(scrollTop >0&& !scrolling &&isBottom()) {

    scrolling =true;

try{

    //找到当前页面的onScroll方法

    var scrollEvent =me.control().onScroll;    //当前页面的onScroll方法,me.control() 是当前页面

    if( scrollEvent ) scrollEvent(onFinish,true);    //这里的true和下面的false分别是用来表示滚到底部(true)还是顶部(false)了

    else onFinish();

   }catch(e) {

        onFinish();

     }

}

if(scrollTop ==0&& !scrolling &&isTop()) {

scrolling =true;

try{

     //找到当前页面的onScroll方法

     var scrollEvent = me.control().onScroll;

     if( scrollEvent )  scrollEvent(onFinish,false);

    else onFinish();

 }catch(e) {

     onFinish();

    }

 }

}

window.addEventListener("scroll",onScroll,false);

});

其中scrollHeight表示滚动条需要滚动的距离,即可滚动的总距离

相关文章

  • SocialCalc即时渲染-SocialCalc.MouseW

    添加滚动条监听事件,实现滚动即时渲染 其中参数:

  • vue计算滚动条滚动速度

    思路:利用滚动条监听事件和定时器,来计算滚动速度;监听事件是只要你滚动条在动就会触发的所以需要定时器来计算滚动速度...

  • iview:table 组件翻页滚动条置顶

    一、效果一: table 点击翻页 滚动条回到顶部 效果二: 监听table 组件的滚动事件

  • Jquery滚动条监听事件

    今天给大家带来Jquery滚动条的监听事件先来一个小例子: $(document).ready(function(...

  • vue 监听滚动条事件

    vue 中滚轮滚动监听事件 方式一: 方式一: 注意: addEventListener事件要加 true 。 如...

  • 你应该知道的兼容写法

    1.滚动条 2.获取样式兼容 3.事件对象兼容 4.阻止事件冒泡兼容 5.阻止默认行为兼容 6.事件监听兼容

  • 滚动条的监听事件

    $(function() { // js部分开始 其中scrollHeight表示滚动条需要滚动的距离,即可...

  • 利用函数节流实现监听滚动条停止

    在我们做前端开发时,有时候会收到监听滚动条滚动和滚动条停止的需求,要想监听滚动条的滚动很简单,直接用window....

  • vue监听滚动条加载数据

    在vue项目里面监听滚动条和在普通的HTML里面监听滚动条的做法是一样的,1.首先需要知道三个值:滚动条距离div...

  • JS函数节流

    我们在web项目中经常会需要用到 图片懒加载 ,设置中我们需要监听scroll滚动条滚动事件 。这种事件响应得十分...

网友评论

      本文标题:滚动条的监听事件

      本文链接:https://www.haomeiwen.com/subject/ufjmjxtx.html