js 实现拖拽滚动
/*** @description 使用鼠標(biāo)拖拽div，實(shí)現(xiàn)橫向、縱向滾動(dòng)* @param el 被拖拽滾動(dòng)的元素（產(chǎn)生滾動(dòng)條的元素）*/function addDragable(el) {let startX = 0; // el的scroll橫向初始位置let gapX = 0; // 鼠標(biāo)點(diǎn)擊時(shí)的橫向初始位置let startY = 0; // el的scroll縱向向初始位置let gapY = 0; // 鼠標(biāo)點(diǎn)擊時(shí)的縱向初始位置el.addEventListener("mousedown", start);function start(event) {// 判斷是否點(diǎn)擊鼠標(biāo)左鍵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(); // 阻止默認(rèn)事件或冒泡 如拖拽時(shí)選中文本return false;}function move(event) {// 移動(dòng)時(shí)的坐標(biāo) - 鼠標(biāo)左鍵點(diǎn)擊時(shí)的坐標(biāo) = 鼠標(biāo)移動(dòng)的相對(duì)距離var left = event.clientX - gapX;var top = event.clientY - gapY;// 滾動(dòng)條初始坐標(biāo) - 移動(dòng)的相對(duì)距離 = 應(yīng)該滾動(dòng)后的坐標(biāo)el.scrollTo(startX - left, startY - top); // 橫向 縱向return false;}function stop() {// 鼠標(biāo)松開，解除綁定el.removeEventListener("mousemove", move, false);el.removeEventListener("mouseup", stop, false);}}
示例：
<!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>實(shí)現(xiàn)元素拖拽滾動(dòng)</title> </head><body><div id="dragableWrapper" class="wrapper"><h2>實(shí)現(xiàn)元素拖拽滾動(dòng)（不會(huì)因拖拽被選中的文字,按情形選一既可。）</h2><h2>js做法：event.preventDefault(); 阻止默認(rèn)事件或冒泡；</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>（轉(zhuǎn)發(fā)請(qǐng)注明出處）</copyright></div></div></div> </body><script>/*** @description 使用鼠標(biāo)拖拽div，實(shí)現(xiàn)橫向、縱向滾動(dòng)* @param el 被拖拽滾動(dòng)的元素（產(chǎn)生滾動(dòng)條的元素）*/function addDragable(el) {let startX = 0; // el的scroll橫向初始位置let gapX = 0; // 鼠標(biāo)點(diǎn)擊時(shí)的橫向初始位置let startY = 0; // el的scroll縱向向初始位置let gapY = 0; // 鼠標(biāo)點(diǎn)擊時(shí)的縱向初始位置el.addEventListener("mousedown", start);function start(event) {// 判斷是否點(diǎn)擊鼠標(biāo)左鍵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(); // 阻止默認(rèn)事件或冒泡 如拖拽時(shí)選中文本return false;}function move(event) {// 移動(dòng)時(shí)的坐標(biāo) - 鼠標(biāo)左鍵點(diǎn)擊時(shí)的坐標(biāo) = 鼠標(biāo)移動(dòng)的相對(duì)距離var left = event.clientX - gapX;var top = event.clientY - gapY;// 滾動(dòng)條初始坐標(biāo) - 移動(dòng)的相對(duì)距離 = 應(yīng)該滾動(dòng)后的坐標(biāo)el.scrollTo(startX - left, startY - top); // 橫向 縱向return false;}function stop() {// 鼠標(biāo)松開，解除綁定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>總結(jié)
- 上一篇： Object definePropert
- 下一篇： 原生js打印指定节点元素