跟随鼠标横向滚动js代码

跟随鼠标横向滚动的JavaScript代码主要涉及到鼠标移动事件（mousemove）和页面滚动（scrollLeft）。以下是一个简单的示例代码，展示了如何实现这一功能：

基础概念

鼠标移动事件（mousemove）：当鼠标指针在元素上移动时触发。
页面滚动（scrollLeft）：用于设置或返回元素的水平滚动条位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Follow Mouse Scroll</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .container {
            width: 200%;
            height: 100vh;
            background: linear-gradient(to right, red, blue);
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <script>
        document.addEventListener('mousemove', function(event) {
            const container = document.querySelector('.container');
            const scrollSpeed = 0.5; // 调整滚动速度
            const mouseX = event.clientX;
            const containerWidth = container.clientWidth;
            const scrollPosition = (mouseX / window.innerWidth) * containerWidth - containerWidth / 2;
            container.scrollLeft = scrollPosition * scrollSpeed;
        });
    </script>
</body>
</html>

代码解释

HTML结构：
- 创建一个宽度为200%的容器，背景色从红色渐变到蓝色，以便观察滚动效果。

CSS样式：
- 设置body的margin为0，并隐藏溢出内容。
- 容器.container占据整个视口高度，并设置宽度为200%，以便有足够的滚动空间。
JavaScript逻辑：
- 监听mousemove事件，获取鼠标在窗口中的水平位置（event.clientX）。
- 计算容器的滚动位置，使其跟随鼠标移动。这里使用了一个简单的线性关系来调整滚动速度。
- 设置容器的scrollLeft属性，实现横向滚动效果。