一、拖拽滚动

1、封装函数

    /*** @description 使用鼠标拖拽div，实现横向、纵向滚动* @param el 被拖拽滚动的元素（产生滚动条的元素）*/function addDragable(el) {let startX = 0; // el的scroll横向初始位置let gapX = 0; // 鼠标点击时的横向初始位置let startY = 0; // el的scroll纵向向初始位置let gapY = 0; // 鼠标点击时的纵向初始位置el.addEventListener("mousedown", start);el.addEventListener("mouseleave", stop); // 移除时解除事件function start(event) {// 判断是否点击鼠标左键if (event.button == 0) {gapX = event.clientX;gapY = event.clientY;startX = el.scrollLeft;startY = el.scrollTop;el.addEventListener("mousemove", move); // documentel.addEventListener("mouseup", stop);}// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本return false;}function move(event) {// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离var left = event.clientX - gapX;var top = event.clientY - gapY;// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标el.scrollTo(startX - left, startY - top); // 横向 纵向return false;}function stop() {// 鼠标松开，解除绑定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}

2、示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现元素拖拽滚动</title>
</head><body><div id="dragableWrapper" class="wrapper"><div id="dragable"><h2>实现元素拖拽滚动（不会因拖拽被选中的文字,按情形选一既可。）</h2><h2>js做法：event.preventDefault(); 阻止默认事件或冒泡；</h2><h2>css做法：user-select: none;</h2><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"><copyright class="copyright">GeniusXYT：<a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">https://blog.csdn.net/GeniusXYT/article/details/124198758</a>（转发请注明出处）</copyright></div></div></div></div>
</body><script>/*** @description 使用鼠标拖拽div，实现横向、纵向滚动* @param el 被拖拽滚动的元素（产生滚动条的元素）*/function addDragable(el) {let startX = 0; // el的scroll横向初始位置let gapX = 0; // 鼠标点击时的横向初始位置let startY = 0; // el的scroll纵向向初始位置let gapY = 0; // 鼠标点击时的纵向初始位置el.addEventListener("mousedown", start);el.addEventListener("mouseleave", stop); // 移除时解除事件function start(event) {// 判断是否点击鼠标左键if (event.button == 0) {gapX = event.clientX;gapY = event.clientY;startX = el.scrollLeft;startY = el.scrollTop;el.addEventListener("mousemove", move); // documentel.addEventListener("mouseup", stop);}// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本return false;}function move(event) {// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离var left = event.clientX - gapX;var top = event.clientY - gapY;// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标el.scrollTo(startX - left, startY - top); // 横向 纵向return false;}function stop() {// 鼠标松开，解除绑定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))</script><style>.wrapper {width: 1000px;height: 500px;padding: 200px;overflow: auto;border: 2px ridge rgb(65, 194, 227);}h2 {user-select: none;}.row {user-select: none;white-space: nowrap;}.box {display: inline-block;width: 300px;height: 300px;background-color: rgb(43, 229, 235);}.row:last-child .box:last-child {position: relative;}.row:last-child .box:last-child .copyright {position: absolute;right: 0;bottom: 0;font-size: 12px;opacity: .2;}
</style></html>

二、滚轮缩放

1、封装函数

	/*** @description 滚轮缩放元素* @param targetEl 被缩放目标元素* @param wrapperEl 产生缩放的包裹元素，默认是targetEl的父元素*/function addScale(targetEl, wrapperEl) {var scale = 1; // 初始缩放比率var scalePercent = 0.2; // 缩放系数（越大缩放跨度越大）var minScale = 0.1; // 最小缩放比率var maxScale = 5; // 最大缩放比率var transformOrigin = "left top"; // 以左上角为基准点，不会造成元素超出左、上边界而没有滚动条问题wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素wrapperEl.addEventListener("mousewheel", onMouseWheel);// 鼠标滚轮事件function onMouseWheel(e) {// var e = e || window.e;var down = true; // 定义向下滚动的标志down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;// 鼠标滚轮向下缩小if (down) {scale = (parseFloat(scale) - scalePercent).toFixed(2);if (scale > minScale) {targetEl.style.transform = "scale(" + scale + ")";targetEl.style.transformOrigin = transformOrigin;} else {scale = minScale;}} else {// 鼠标滚轮向上放大scale = (parseFloat(scale) + scalePercent).toFixed(2);if (scale < maxScale) {targetEl.style.transform = "scale(" + scale + ")";targetEl.style.transformOrigin = transformOrigin;} else {scale = maxScale;}}if (e.preventDefault) {/*FF 和 Chrome*/e.preventDefault(); // 阻止默认事件}return false;}}

2、结合拖拽滚动示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现元素拖拽滚动</title>
</head><body><div id="dragableWrapper" class="wrapper"><div id="dragable"><h2>实现元素拖拽滚动（不会因拖拽被选中的文字,按情形选一既可。）</h2><h2>js做法：event.preventDefault(); 阻止默认事件或冒泡；</h2><h2>css做法：user-select: none;</h2><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div><div class="row"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"><copyright class="copyright">GeniusXYT：<a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">https://blog.csdn.net/GeniusXYT/article/details/124198758</a>（转发请注明出处）</copyright></div></div></div></div>
</body><script>/*** @description 使用鼠标拖拽div，实现横向、纵向滚动* @param el 被拖拽滚动的元素（产生滚动条的元素）*/function addDragable(el) {let startX = 0; // el的scroll横向初始位置let gapX = 0; // 鼠标点击时的横向初始位置let startY = 0; // el的scroll纵向向初始位置let gapY = 0; // 鼠标点击时的纵向初始位置el.addEventListener("mousedown", start);el.addEventListener("mouseleave", stop); // 移除时解除事件function start(event) {// 判断是否点击鼠标左键if (event.button == 0) {gapX = event.clientX;gapY = event.clientY;startX = el.scrollLeft;startY = el.scrollTop;el.addEventListener("mousemove", move); // documentel.addEventListener("mouseup", stop);}// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本return false;}function move(event) {// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离var left = event.clientX - gapX;var top = event.clientY - gapY;// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标el.scrollTo(startX - left, startY - top); // 横向 纵向return false;}function stop() {// 鼠标松开，解除绑定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}/*** @description 滚轮缩放元素* @param targetEl 被缩放目标元素* @param wrapperEl 产生缩放的包裹元素，默认是targetEl的父元素*/function addScale(targetEl, wrapperEl) {var scale = 1; // 初始缩放比率var scalePercent = 0.2; // 缩放系数（越大缩放跨度越大）var minScale = 0.1; // 最小缩放比率var maxScale = 5; // 最大缩放比率var transformOrigin = "left top"; // 以左上角为基准点，不会造成元素超出左、上边界而没有滚动条问题wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素wrapperEl.addEventListener("mousewheel", onMouseWheel);// 鼠标滚轮事件function onMouseWheel(e) {// var e = e || window.e;var down = true; // 定义向下滚动的标志down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;// 鼠标滚轮向下缩小if (down) {scale = (parseFloat(scale) - scalePercent).toFixed(2);if (scale > minScale) {targetEl.style.transform = "scale(" + scale + ")";targetEl.style.transformOrigin = transformOrigin;} else {scale = minScale;}} else {// 鼠标滚轮向上放大scale = (parseFloat(scale) + scalePercent).toFixed(2);if (scale < maxScale) {targetEl.style.transform = "scale(" + scale + ")";targetEl.style.transformOrigin = transformOrigin;} else {scale = maxScale;}}if (e.preventDefault) {/*FF 和 Chrome*/e.preventDefault(); // 阻止默认事件}return false;}}addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))addEventListener("onload", addScale(document.getElementById("dragable")))// addEventListener("onload", addScale(document.getElementById("dragable"), document.getElementById("dragable"))) // 仅在元素本身生效</script><style>.wrapper {width: 1000px;height: 500px;padding: 200px;overflow: auto;border: 2px ridge rgb(65, 194, 227);}h2 {user-select: none;}.row {user-select: none;white-space: nowrap;}.box {display: inline-block;width: 300px;height: 300px;background-color: rgb(43, 229, 235);}.row:last-child .box:last-child {position: relative;}.row:last-child .box:last-child .copyright {position: absolute;right: 0;bottom: 0;font-size: 12px;opacity: .2;}
</style></html>