Question

我有一个身体有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设置为该功能。问题是这个事件没有触发，然后我发现this page表示事件只在有滚动条时触发，但是我不想要滚动条。

如何在不显示滚动条的情况下检测滚轮？ I do not want to use jQuery

Answer 1

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

您可以使用wheel事件。调用该事件后，它将具有Delta值，该值将显示鼠标滚轮滚动的像素数。虽然您只对deltaY一个感兴趣。

现在，一旦进行了垂直更改，您只需更新transform:translateY的值并将e.deltaY值减去它即可更新正文的翻译。像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

很难在该窗口看到效果，你可以在这个JSFiddle上看到它更好：http://jsfiddle.net/pLb93eeL/4/

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

1 个答案: