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的滚动条高度改一下