html+JavaScript实现拖拽滚动

最新推荐文章于 2024-07-10 14:03:37 发布

瑞晟技术服务中心-耿瑞

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量489

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_45966674/article/details/129256764

版权

很简单直接复制代码放个html文件直接就能跑起来

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动拖拽</title>
    <style>
        .scrollContainer {
            width: 450px;
            height: 450px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="scrollContainer">
    <div style = "width: 100vw;height: 100vh;">
        说的撒打发萨达发电机房拉斯柯达急啊大厦里看风景拉设计费雷克萨大家发拉斯柯达就发了喀什的就发拉斯柯达就发拉开始对接发拉斯柯达就啊发拉开始对接法拉斯柯达
        sadly飞机撒的两款发加上的拉库房加上的会计法拉看风景是多啦看风景拉萨的咖啡机啥的李逵负荆拉伸卡的减肥拉刷卡的房间拉刷卡的房间拉萨的房间雷克萨大家发时
        阿圣诞快乐附件三发家的老客服结束啦的开发就阿斯拉达会计法辣三丁会计法刷卡来得及安防奥斯卡的龙卷风雷克萨大家发卡拉三等奖雷克萨大家啥的放假烧腊店会计法
        萨达发结束啦的开发结束啦大哭减肥拉萨地块减肥拉萨地块就是打开了房间鲁大师咖啡机爱上了的看法就阿圣诞快乐就发生看到了附件拉伸的开发家代理费聚少离多反馈
        沙迪克发就苏打绿咖啡就沙拉得减肥沙拉的咖啡机拉萨的咖啡机拉伸发了喀什京东方卡死了解放路撒家乐福家是东风路卡撒打发了就撒大力开发苏打绿咖啡山大反馈就撒
    </div>
</div>
</body>
<script>
    let scrollContainer = document.querySelector(".scrollContainer");
    scrollContainer.onmousedown = e => {
        //鼠标按下那一刻，滚动条的位置
        let mouseDownScrollPosition = {
            scrollLeft: scrollContainer.scrollLeft,
            scrollTop: scrollContainer.scrollTop
        };
        //鼠标按下的位置坐标
        let mouseDownPoint = {
            x: e.clientX,
            y: e.clientY
        };
        scrollContainer.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 => {
            scrollContainer.onmousemove = null;
            document.onmouseup = null;
        };
 
    };
</script>
</html>