主页 / 问题 / 722003
Accepted
Kiral
Asked:2020-09-23 03:26:16 +0800 CST2020-09-23 03:26:16 +0800 CST

用鼠标水平滚动块

  • 772

将鼠标悬停在 DIV 上时，如何使用鼠标滚轮实现水平滚动？

也许有一个特定的解决方案（现成的代码）？

scroll

1 个回答

  1. Best Answer

    鼠标滚轮和其他指针设备可以生成垂直和水平滚动事件。下面的 JavaScript 脚本将垂直滚动替换为水平滚动，忽略了后者的设置。也就是说，元素总是横向滚动与垂直滚动相同的量。垂直滚动将被禁用，因此希望块的内容适合其边界。

    document.getElementById("horizontal-scroller")
  .addEventListener('wheel', function(event) {
    if (event.deltaMode == event.DOM_DELTA_PIXEL) {
      var modifier = 1;
      // иные режимы возможны в Firefox
    } else if (event.deltaMode == event.DOM_DELTA_LINE) {
      var modifier = parseInt(getComputedStyle(this).lineHeight);
    } else if (event.deltaMode == event.DOM_DELTA_PAGE) {
      var modifier = this.clientHeight;
    }
    if (event.deltaY != 0) {
      // замена вертикальной прокрутки горизонтальной
      this.scrollLeft += modifier * event.deltaY;
      event.preventDefault();
    }
  });
    <pre id="horizontal-scroller" style="overflow:auto">
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
</pre>

    • 2

相关问题