js 实现拖拽滚动、滚轮缩放元素函数和案例

原创

已于 2022-04-22 10:12:42 修改 · 置顶 · 2.9k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#js

于 2022-04-15 17:31:04 首次发布

本文介绍了如何使用JavaScript封装函数，实现拖拽滚动和滚轮缩放功能，通过实例展示了如何结合这两个效果在网页元素中，提升用户体验。

该文章已生成可运行项目，

文章目录

一、拖拽滚动
- 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); // document
                el.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>