jquery实现某一区域禁用滚动栏事件

61 阅读1分钟

开发中遇到一个问题,期望滚动地图区域实现地图缩放,滚动地图区域之外实现滚动栏滚动。 实现思路:

  1. 监听滚动事件
  2. 判断当前鼠标停留的位置
  3. 如果鼠标悬停在地图区域,则将滚动栏参数值置为-1
$(function () {
    // 鼠标进入到区域后,则存储当前window滚动条的高度
    var scrollTop = -1;
    $('body').hover(function(event){
        scrollTop = $(window).scrollTop();
    }, function(event){
        scrollTop = -1;
    });

    // 鼠标进入到区域后,则强制window滚动条的高度
    $(window).scroll(function(event){
        let flag = $("#baidumap").is(':hover');
        if(flag){
            scrollTop!==-1 && $(this).scrollTop(scrollTop);
        }
    })
})