javascript - 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 目前不支持 Smooth，但是有一个 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>