js 使用鼠标滚轮水平滚动页面 - Javascript (1)

📌 相关文章

📜 js 使用鼠标滚轮水平滚动页面 - Javascript (1)

📅 最后修改于: 2023-12-03 15:17:00.858000 🧑 作者: Mango

使用鼠标滚轮水平滚动页面

在传统的网页设计中，鼠标滚轮只能实现垂直方向的滚动，但是有些设计师不满足这种单一的滚动方式，希望能够在水平方向上实现滚动。本文将介绍如何使用 JavaScript 实现鼠标滚轮水平滚动页面。

HTML

在 HTML 中，需要将整个文档包裹在一个容器中，这个容器需要设置横向滚动条，并且将其隐藏：

<body>
  <div id="container" style="overflow-x: scroll; overflow-y: hidden">
    // 页面内容
  </div>
</body>

JavaScript

Step 1：检测鼠标滚轮事件

我们需要先检测鼠标滚轮事件，这可以通过绑定滚轮事件来实现。但是由于浏览器对于滚轮事件的支持不同，我们需要添加跨浏览器的事件监听代码。

function addWheelListener(element, callback) {
  if (element.addEventListener) {
    if ('onwheel' in document) {
      // IE9+, Chrome, Firefox
      element.addEventListener("wheel", callback);
    } else if ('onmousewheel' in document) {
      // legacy event for earlier versions of Chrome, Safari, Opera
      element.addEventListener("mousewheel", callback);
    } else {
      // legacy event for IE 6/7/8
      element.addEventListener("MozMousePixelScroll", callback);
    }
  } else { // IE 8 and below
    element.attachEvent("onmousewheel", callback);
  }
}

Step 2：实现水平滚动

我们希望鼠标向下滚动，页面向右滚动；鼠标向上滚动，页面向左滚动。我们需要获取鼠标滚轮事件的 deltaY 值，来判断滚动的方向。

// 获取滚动方向
function getWheelDirection(event) {
  var delta = 0;
  if (event.wheelDelta) delta = event.wheelDelta / 120; // for Webkit browsers
  if (event.detail) delta = -event.detail / 3; // for Firefox
  return delta;
}

// 实现水平滚动
function horizontalScroll(event) {
  event.preventDefault();
  container.scrollLeft -= getWheelDirection(event) * 20;
}

// 绑定滚轮事件
var container = document.getElementById("container");
addWheelListener(container, horizontalScroll);

结论

现在，我们已经实现了鼠标滚轮水平滚动页面的功能。将上述代码放进 HTML 文件中，即可实现页面的水平滚动。