使用鼠标滚动的html水平滚动

Question

我想要使用鼠标滚动（鼠标滚轮和触摸板）实现流畅水平滚动

我只能让它从一个位置跳到另一个位置。

function transformScroll(event) {
  if (!event.deltaY) {
    return;
  }
  event.currentTarget.scrollLeft += event.deltaY + event.deltaX

  }

  var element = document.scrollingElement || document.documentElement;
  element.addEventListener('wheel', transformScroll);

.hs {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  list-style: none;
}

.hs > li,
.item {
  border-right: #ffffff99 1px solid;
  width: 25vw;
  height: 100vh;
}

.item:last-child {
  border-right: unset;
}

<ul class="hs">
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
</ul>

我不在乎它是用 js 编程还是只用 css 编程。 我们尝试了其他 js 和 css（例如旋转网格）方法，但没有得到令人满意的结果。

Answer 1

首先，您需要防止默认操作：使用prefentDefault() 为滚轮事件“向下滚动”。
而且由于浏览器出于性能原因已经开始避免阻止这种“默认操作”，因此您需要使用{passive:false}

然后您可以使用scrollBy() 和选项{behavior:'smooth'} 滚动到那里。

Safari 目前不支持平滑，但有一个 polyfill：
https://github.com/wessberg/scroll-behavior-polyfill

function transformScroll(event) {
  event.preventDefault();
  if (!event.deltaY) return;
  event.currentTarget.scrollBy({
    top: 0,
    left: event.deltaY + event.deltaX,
    behavior: 'smooth'
  });
}
var element = document.scrollingElement || document.documentElement;
element.addEventListener('wheel', transformScroll, {passive:false});

.hs {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  list-style: none;
}

.hs > li,
.item {
  border-right: #ffffff99 1px solid;
  width: 25vw;
  height: 100vh;
}

.item:last-child {
  border-right: unset;
}

<ul class="hs">
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
  <li class="item">test</li>
</ul>