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

最新推荐文章于 2022-05-01 14:36:51 发布

原创最新推荐文章于 2022-05-01 14:36:51 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

13 篇文章

订阅专栏

该博客探讨了如何在网页中实现地图区域滚动缩放，而地图区域外保持正常滚动条滚动的效果。通过监听滚动事件，判断鼠标位置，设置滚动条高度，实现了地图与滚动栏的智能交互功能。

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

监听滚动事件
判断当前鼠标停留的位置
如果鼠标悬停在地图区域，则将滚动栏参数值置为-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);
        }
    })
})