南通做网站建设公司,网站建设方案计划书人员规划,站长之家查询网站,厦门百度推广排名优化文章目录一、拖拽滚动1、封装函数2、示例#xff1a;二、滚轮缩放1、封装函数2、结合拖拽滚动示例一、拖拽滚动 1、封装函数 /*** description 使用鼠标拖拽div#xff0c;实现横向、纵向滚动* param el 被拖拽滚动的元素#xff08;产生滚动条的元素#xff09;*/functio… 文章目录一、拖拽滚动1、封装函数2、示例二、滚轮缩放1、封装函数2、结合拖拽滚动示例一、拖拽滚动 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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实现元素拖拽滚动/title /headbodydiv iddragableWrapper classwrapperdiv iddragableh2实现元素拖拽滚动不会因拖拽被选中的文字,按情形选一既可。/h2h2js做法event.preventDefault(); 阻止默认事件或冒泡/h2h2css做法user-select: none;/h2div classrowdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/div/divdiv classrowdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/divdiv classboxcopyright classcopyrightGeniusXYTa hrefhttps://blog.csdn.net/GeniusXYT/article/details/124198758https://blog.csdn.net/GeniusXYT/article/details/124198758/a转发请注明出处/copyright/div/div/div/div /bodyscript/*** 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)))/scriptstyle.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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title实现元素拖拽滚动/title /headbodydiv iddragableWrapper classwrapperdiv iddragableh2实现元素拖拽滚动不会因拖拽被选中的文字,按情形选一既可。/h2h2js做法event.preventDefault(); 阻止默认事件或冒泡/h2h2css做法user-select: none;/h2div classrowdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/div/divdiv classrowdiv classbox/divdiv classbox/divdiv classbox/divdiv classbox/divdiv classboxcopyright classcopyrightGeniusXYTa hrefhttps://blog.csdn.net/GeniusXYT/article/details/124198758https://blog.csdn.net/GeniusXYT/article/details/124198758/a转发请注明出处/copyright/div/div/div/div /bodyscript/*** 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))) // 仅在元素本身生效/scriptstyle.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如有帮助请 点赞 收藏 转发