一、拖拽滾動

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>