Question

我想要使用鼠标滚动（鼠标滚轮和触摸板）进行平滑水平滚动

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

---
  title: "Structured Demo 3 - Test"
---

<script type="application/ld+json">  
{
  "@context": "http://schema.org",
  "@type": "Dataset",
  "name":"Canadian High-Interest Savings Accounts",
  "description": "Up-to-date and unbiased table of rates of high-interest savings accounts from Canadian banks and credit unions along with their insurer.",
  "publisher": {
    "@type": "Organization",
    "name": "Company X"
  },
  "mainEntity" : {
    "@type" : "csvw:Table",
    "csvw:tableSchema": {
      "csvw:columns": [
        {
          "csvw:name": "Financial Institution",
          "csvw:datatype": "string",
          "csvw:cells": [
            {
              "csvw:value": "Saven Financial",
              "csvw:primaryKey": "Saven Financial"
            },
            {
              "csvw:value": "Neo Financial",
              "csvw:primaryKey": "Neo Financial"
            }]
        },
        {
          "csvw:name": "Rate",
          "csvw:datatype": "string",
          "csvw:cells": [
            {
              "csvw:value": "1.55",
              "csvw:primaryKey": "Saven Financial"
            },
            {
              "csvw:value": "1.55",
              "csvw:primaryKey": "Neo Financial"
            }]
        },
        {
          "csvw:name": "Insured By",
          "csvw:datatype": "string",
          "csvw:cells": [
            {
              "csvw:value": "FSRA",
              "csvw:primaryKey": "Saven Financial"
            },
            {
              "csvw:value": "CDIC",
              "csvw:primaryKey": "Neo Financial"
            }]
        }]
    }
  }
}
</script>

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;
}

我不在乎它是用 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>

html 水平滚动鼠标滚动

1 个答案: