我有一个网页，其中的身体有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。
编辑：此答案的先前版本用于
mousewheel非标准/不建议使用的事件。请改用wheel事件。请注意，在这种情况下，的值deltaY与wheelDeltaYso 的值相反。
您可以使用该wheel事件。调用该事件后，它将具有Delta值，该值将显示鼠标滚轮滚动了多少像素。虽然您只会对deltaY其中一个感兴趣。
现在，一旦您进行了垂直更改，您只需通过更新body的值transform:translateY并将其减去该e.deltaY值来更新body的平移。像这样：
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/