给元素添加右键拖拽滚动功能
需求
对于超出宽度的数据出现滚动条，想要查看后面的数据首先要滑动到底部再点击滚动条才可以横向滚动，特别是table数据，为方便数据查看，增加右键拖拽滚动，不用再拉到底部，方便用户操作
实现方式
监听用户鼠标右键mousedown事件，事件触发后再监听mousemove事件，mousemove事件中操作滚动，同时全局监听mouseup事件，mouseup事件触发后删除mousemove和mouseup监听
具体实现方法
//dom-源元素，type：x|y|null-横向、纵向、全部拖动
function addMouseRightEvent(dom, type) {
dom.addEventListener("mousedown", (mouseDownEvent) => {
if (mouseDownEvent.button === 2) {
const startX = mouseDownEvent.clientX;
const startY = mouseDownEvent.clientY;
let lastX = startX;
let lastY = startY;
document.body.style.cursor = "grab";
const mouseMove = (mouseMoveEvent) => {
const moveX = lastX - mouseMoveEvent.clientX;
const moveY = lastY - mouseMoveEvent.clientY;
lastX = mouseMoveEvent.clientX;
lastY = mouseMoveEvent.clientY;
if (moveX !== 0&&(!type||type==='x')) {
dom.scrollLeft += moveX;
}
if (moveY !== 0&&(!type||type==='y')) {
dom.scrollTop += moveY;
}
};
const mouseUp = (mouseUpEvent) => {
if (mouseUpEvent.clientX !== startX) {
document.oncontextmenu = function (e) {
/*屏蔽浏览器默认右键事件*/
return false;
};
} else {
document.oncontextmenu = function (e) {
/*恢复浏览器默认右键事件*/
return true;
};
}
document.body.style.cursor = "";
dom.removeEventListener('mousemove',mouseMove)
document.removeEventListener('mouseup',mouseUp)
};
dom.addEventListener('mousemove',mouseMove)
document.addEventListener('mouseup',mouseUp)
}
});
}