在没有滚动条的页面上检测滚动

Question

在没有滚动条的页面上检测滚动

14

我有一个网页，其中正文有CSS。

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

我不想显示滚动条。

当用户向下滚动时，我想运行一些 JavaScript。因此我这样做：

<script>
document.addEventListener("scroll", function (e) {
    console.log("scrolling engage");
    if (e.detail > 0) {
        // do things ...
    }
    return false;
}, true);
</script>

我也尝试将 onscroll 设置为该函数。问题是此事件不会触发，然后我发现了这个页面，它说只有在有滚动条时才会触发该事件，但我不想要滚动条。

如何在不显示滚动条的情况下检测滚动轮？我不想使用 jQuery。

- Alice Ryhl

请看这个问题：https://dev59.com/j2Qn5IYBdhLWcg3wpYj0 - roemel

我知道你不想使用jQuery，但是找出如何做到这一点的好方法是查看jQuery鼠标滚轮源代码，其中包含了各种用于检测跨浏览器鼠标滚轮事件的纯JavaScript解决方案。 - gfullam

你打算用鼠标来滚动吗？ - Alvaro Montoro

@AlvaroMontoro 是的，我想要检测鼠标上的滚轮。 - Alice Ryhl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alvaro Montoro · Accepted Answer

编辑：此答案的先前版本适用于非标准/已弃用的“mousewheel”事件。请改用“wheel”事件。请注意，在这种情况下，“deltaY”的值与“wheelDeltaY”的值相反，因此您需要减去而不是添加。

您可以使用“wheel”事件。一旦调用该事件，它就具有Delta值，这将显示鼠标滚轮滚动了多少像素。尽管您只对“deltaY”感兴趣。

现在，一旦您拥有垂直变化，您只需要通过更新“transform:translateY”的值并从中减去“e.deltaY”的值来更新正文的翻译。类似这样：

document.addEventListener("wheel", function (e) {

    // get the old value of the translation (there has to be an easier way than this)
    var oldVal = parseInt(document.getElementById("body").style.transform.replace("translateY(","").replace("px)",""));

    // to make it work on IE or Chrome
    var variation = parseInt(e.deltaY);
    
    // update the body translation to simulate a scroll
    document.getElementById("body").style.transform = "translateY(" + (oldVal - variation) + "px)";

    return false;
    
}, true);

body {
    overflow-y:hidden;
    overflow-x:hidden;
}

<body id="body" style="transform:translateY(0px)">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
  <p>13</p>
  <p>14</p>
  <p>15</p>
  <p>16</p>
  <p>17</p>
  <p>18</p>
  <p>19</p>
  <p>20</p>
</body>

在那个窗口中很难看到效果，您可以在这个JSFiddle上更清楚地看到：http://jsfiddle.net/pLb93eeL/4/