当前位置：首页 > article >正文

HTML+JS+CSS 鼠标上下移动页面（非滚动条）

article 2025/2/26 0:59:42

<!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>Mouse Drag Scroll - IE11 Compatible</title>
    <style>
        body {
            height: 2000px;
            /* 为了方便测试滚动效果，设置一个较长的页面 */
            /* 使用自定义的鼠标指针图片，这里假设图片名为 grab.cur */
            cursor: url('file:///C:/grab.cur'), default;
        }

        /* 定义按下鼠标左键时的鼠标指针样式 */
        body.dragging {
            /* 使用自定义的鼠标指针图片，这里假设图片名为 grabbing.cur */
            cursor: url('file:///C:/grabbing.cur'), default;
        }
    </style>
</head>

<body>
    <!-- 这里可以添加具体的页面内容 -->
    <h1>鼠标拖动滚动页面示例 - 兼容 IE11</h1>
    <script>
        // 定义变量来跟踪鼠标状态和初始位置
        var isDragging = false;
        var startY = 0;
        var initialScrollTop = 0;
        var body = document.body;

        // 获取文档对象
        var doc = document.documentElement || document.body;

        // 监听鼠标按下事件
        if (document.attachEvent) {
            document.attachEvent('onmousedown', mouseDownHandler);
        } else {
            document.addEventListener('mousedown', mouseDownHandler);
        }

        function mouseDownHandler(event) {
            event = event || window.event;
            // 只有按下鼠标左键时才进行操作
            if ((event.which && event.which === 1) || (event.button && event.button === 1)) {
                // 判断是否点击在滚动条上
                if (isClickOnScrollbar(event)) {
                    return; // 如果点击在滚动条上，不执行后续拖动逻辑
                }
                isDragging = true;
                // 记录鼠标按下时的垂直位置
                startY = event.clientY;
                // 记录当前页面的滚动位置
                initialScrollTop = doc.scrollTop;
                // 添加 dragging 类，改变鼠标指针样式
                addClass(body, 'dragging');
            }
        }

        // 判断鼠标是否点击在滚动条上
        function isClickOnScrollbar(event) {
            // 获取窗口宽度
            var windowWidth = window.innerWidth;
            // 获取文档元素宽度
            var docWidth = doc.clientWidth;
            // 计算滚动条宽度
            var scrollbarWidth = windowWidth - docWidth;
            // 判断鼠标点击的水平位置是否在滚动条范围内
            return event.clientX >= windowWidth - scrollbarWidth;
        }

        // 监听鼠标移动事件
        if (document.attachEvent) {
            document.attachEvent('onmousemove', mouseMoveHandler);
        } else {
            document.addEventListener('mousemove', mouseMoveHandler);
        }

        function mouseMoveHandler(event) {
            event = event || window.event;
            if (isDragging) {
                // 计算鼠标垂直移动的距离
                var deltaY = event.clientY - startY;
                // 根据鼠标移动距离来滚动页面
                doc.scrollTop = initialScrollTop - deltaY;
            }
        }

        // 监听鼠标松开事件
        if (document.attachEvent) {
            document.attachEvent('onmouseup', mouseUpHandler);
        } else {
            document.addEventListener('mouseup', mouseUpHandler);
        }

        function mouseUpHandler() {
            // 停止拖动状态
            isDragging = false;
            // 移除 dragging 类，恢复鼠标指针样式
            removeClass(body, 'dragging');
        }

        // 监听鼠标离开窗口事件，防止鼠标移出窗口后仍在拖动
        if (document.attachEvent) {
            document.attachEvent('onmouseleave', mouseLeaveHandler);
        } else {
            document.addEventListener('mouseleave', mouseLeaveHandler);
        }

        function mouseLeaveHandler() {
            isDragging = false;
            // 移除 dragging 类，恢复鼠标指针样式
            removeClass(body, 'dragging');
        }

        // 兼容 IE11 的添加类名函数
        function addClass(element, className) {
            if (element.className.indexOf(className) === -1) {
                if (element.className === '') {
                    element.className = className;
                } else {
                    element.className += ' ' + className;
                }
            }
        }

        // 兼容 IE11 的移除类名函数
        function removeClass(element, className) {
            var classNames = element.className.split(' ');
            var newClassNames = [];
            for (var i = 0; i < classNames.length; i++) {
                if (classNames[i] !== className) {
                    newClassNames.push(classNames[i]);
                }
            }
            element.className = newClassNames.join(' ');
        }
    </script>
</body>

</html>

查看全文

http://www.kler.cn/a/561053.html