【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动

你挚爱的强哥

已于 2023-09-26 08:16:23 修改

阅读量1.7k

点赞数 1

分类专栏： CSS2/CSS3/LESS/SASS/SCSS/HTML JavaScript&TypeScript Sg.js框架文章标签： javascript html 前端

于 2022-10-10 22:17:01 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/127253779

版权

JavaScript&TypeScript 同时被 3 个专栏收录

230 篇文章 8 订阅

订阅专栏

Sg.js框架

178 篇文章 7 订阅

订阅专栏

CSS2/CSS3/LESS/SASS/SCSS/HTML

103 篇文章 4 订阅

订阅专栏

直接复制代码运行就对了！！！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”，滚动条对应同步滚动</title>
    <style>
        /*滚动条样式----------------------------------------*/
        /*滚动条轨道*/
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background: #00000011;
        }

        /*滚动条滑块*/
        ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background: #00000033;
        }

        /*移入滑块*/
        ::-webkit-scrollbar-thumb:hover {
            background: #00000055;
        }

        /*拐角处*/
        ::-webkit-scrollbar-corner {
            background: none;
        }

        /*----------------------------------------*/

        .scrollContainer {
            width: 900px;
            height: 400px;
            overflow: auto;
        }

        .dragContainer {
            width: 1200px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dragContainer p {
            width: 500px;
            font-size: 40px;
            font-weight: bold;
            padding: 50px;
            border-radius: 50px;
            background-color: #409EFF;
            color: white;
        }

        /*核心样式----------------------------------------*/

        .dragContainer {
            cursor: grab;
        }

        .dragContainer:active {
            cursor: grabbing;
            user-select: none;
        }

        /*  ----------------------------------------  */
    </style>
</head>
<body>
<div class="scrollContainer">
    <div class="dragContainer">
        <p>这里的文字是可以拖拽的，可以左右上下拖拽，水平垂直滚动条也会对应滚动！拖拽的幅度和滚动条移动的幅度是对应等比例的！</p>
    </div>
</div>
</body>
<script>
    let scrollContainer = document.querySelector(".scrollContainer");
    let dragContainer = document.querySelector(".dragContainer");
    dragContainer.onmousedown = e => {
        //鼠标按下那一刻，滚动条的位置
        let mouseDownScrollPosition = {
            scrollLeft: scrollContainer.scrollLeft,
            scrollTop: scrollContainer.scrollTop
        };
        //鼠标按下的位置坐标
        let mouseDownPoint = {
            x: e.clientX,
            y: e.clientY
        };
        dragContainer.onmousemove = e => {
            //鼠标滑动的实时距离
            let dragMoveDiff = {
                x: mouseDownPoint.x - e.clientX,
                y: mouseDownPoint.y - e.clientY
            };
            scrollContainer.scrollLeft = mouseDownScrollPosition.scrollLeft + dragMoveDiff.x;
            scrollContainer.scrollTop = mouseDownScrollPosition.scrollTop + dragMoveDiff.y;
        };
        document.onmouseup = e => {
            dragContainer.onmousemove = null;
            document.onmouseup = null;
        };

    };
</script>
</html>

关联文章【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动_你挚爱的强哥的博客-CSDN博客【代码】【sgDragMoveTile】自定义组件：拖拽瓦片图、地图、大图，滚动条对应同步滚动。https://blog.csdn.net/qq_37860634/article/details/133292981