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

Posted 2023-05-08

【中文标题】使用鼠标滚动的html水平滚动

【英文标题】：html horizontal scrolling with mousescrolling

【发布时间】：2021-07-26 09:28:03

【问题描述】：

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

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

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（例如旋转网格）方法，但没有得到令人满意的结果。

【问题讨论】：

滚动行为：平滑有影响吗？

没有区别，因为它只是添加一个值并立即使用新值。

【参考方案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>

【讨论】：

它工作顺利，这是朝着我想要的方向迈出的一大步。唯一的问题是，当您快速滚动时，它会滚动非常慢。