鼠标左右滑动 元素相反方向滚动 js

在JavaScript中，可以通过监听鼠标滚轮事件来实现鼠标左右滑动元素相反方向滚动的效果。具体步骤如下：

1. 首先，需要获取要滚动的元素。可以通过getElementById()、getElementsByClassName()或querySelector()等方法获取到对应的元素对象。

2. 接下来，需要给该元素添加鼠标滚轮事件监听器。可以使用addEventListener()方法来为元素绑定"wheel"事件。

3. 在事件处理函数中，可以通过event对象的deltaX属性来获取鼠标滚轮在水平方向上的滚动值。根据滚动值的正负，可以判断鼠标是向左滑动还是向右滑动。

4. 根据滑动方向，可以通过改变元素的scrollLeft属性来实现元素的滚动效果。如果鼠标向左滑动，则scrollLeft值增加；如果鼠标向右滑动，则scrollLeft值减少。

下面是一个简单的示例代码：

// 获取要滚动的元素
var element = document.getElementById("scrollableElement");

// 添加鼠标滚轮事件监听器
element.addEventListener("wheel", function) {
  // 获取鼠标滚轮在水平方向上的滚动值
  var deltaX = event.deltaX;

  // 判断滑动方向并改变元素的scrollLeft值
  if (deltaX < 0) {
    // 鼠标向左滑动，scrollLeft值增加
    element.scrollLeft += 10;
  } else {
    // 鼠标向右滑动，scrollLeft值减少
    element.scrollLeft -= 10;
  }

  // 阻止默认的滚动行为
  event.preventDefault();
});

请注意，上述代码只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的修改和优化。