一个普普通通的div如何能做到滚动鼠标滚轮时滚动条滑动距离,查了一下没搜到现成的,试着用jQuery做了一个能用的。
注:
- 仅在Chrome 83.0.4103.61I下测试正常,其他浏览器没试。
- 需要链接jQuery.js。
以下为示例代码。
HTML
<script>
window.onload = function () {
setScrollLength("median-in", 40);
};
</script>
<body>
<div id="median-in">
......
</div>
</body>
JS
function setScrollLength(targetId, length) {
EventUtil.addEventHandler(document.getElementById(targetId), "mousewheel", function (e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
let nowScroll = document.getElementById(targetId).scrollTop;
let top;
if (e.wheelDeltaY < 0) {
top = nowScroll + length;
} else if (e.wheelDeltaY > 0) {
top = nowScroll - length;
}
$("#" + targetId).animate({scrollTop: top}, 0);
})
}
EventUtil = {
addEventHandler(target, event, handler) {
if (target.addEventListener) {
target.addEventListener(event, handler, false);
} else if (target.attachEvent) {
target.attachEvent("on" + event, handler);
} else {
target["on" + event] = handler;
}
},
removeEventHandler(target, event, handler) {
if (target.removeEventListener) {
target.removeEventListener(event, handler, false);
} else if (target.detachEvent) {
target.detachEvent("on" + event, handler);
} else {
target["on" + event] = null;
}
}
}