一个div滚动触发另一个div滚动

html代码：

<div class="list-body">这个有滚动条</div>
<div class=".mask">这个是遮罩层</div>

js代码：

$(function () {
        $(".list-body").scroll(function () {
            var ls = $(".list-body tr").eq(4);

            var TopOffset = 50;
            var top = ls[0].getBoundingClientRect().top - $(".list-table")[0].getBoundingClientRect().top + TopOffset;
            
            if (top < 55) {
                $(".mask")[0].style.top = "48px";
            } else {
                $(".mask")[0].style.top = top + "px";
            }
        })
        $('.mask').bind('mousewheel', function (event) {
            var scroll_top = $(".list-body").scrollTop();
            if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                $(".list-body").scrollTop(scroll_top - 100);
            } else {
                $(".list-body").scrollTop(scroll_top + 100);
            }
            event.preventDefault()

            return false;
        });
    })

 

原理是鼠标放到mask的div上不会触发滚动条的滚动事件，这里给mask加了个滚动事件监听，有滚动就把list-body的滚动条高度改一下