ziyue7575

TOC

js监听页面滚动条

使用scroll()方法

https://www.w3school.com.cn/jquery/event_scroll.asp

当页面滚动条变化时,执行的函数:

$(window).scroll(function () {....});
或
$(selector).scroll(function)//function非必须

案例

旧版本

旧版本可以使用bind/unbind方法

// 页面渲染完之中执行的代码
$(function(){
    // 绑定事件,监听滚动条下拉的动作
    bindScrollEvent();
});
function bindScrollEvent(){
    // 添加滚动监听事件
    $(window).scroll( function() {
        var docHeight = $(document).height(); // 获取整个页面的高度(不只是窗口,还包括为显示的页面)
        var winHeight = $(window).height(); // 获取当前窗体的高度(显示的高度)
        var winScrollHeight = $(window).scrollTop(); // 获取滚动条滚动的距离(移动距离)
        //还有30像素的时候,就查询
        if(docHeight == winHeight + winScrollHeight){
            //到底(一般是离到底还有一段距离就查询的)
        }
    });
}


//移除监听
$(window).unbind("scroll");

新版本

function doSth () {
    // do something
}
// 绑定scroll事件
$(window).on(\'scroll\', doSth);
// 解绑scroll事件
$(window).off(\'scroll\', doSth);




分类:

技术点:

相关文章:

  • 2021-08-01
  • 2021-08-31
  • 2022-12-23
  • 2022-01-12
  • 2022-01-12
  • 2021-08-26
  • 2021-08-23
  • 2022-12-23
猜你喜欢
  • 2021-08-27
  • 2021-09-28
  • 2022-12-23
  • 2021-12-23
  • 2021-07-19
  • 2021-09-15
  • 2021-10-30
相关资源
相似解决方案