如果用户在没有滚动条的情况下滚动滚轮，则触发

Question

所以，我正在尝试创造一些独特的东西并使用绝对定位。与overflow:hidden;一起，此网站不包含滚动条，但我仍需要测试用户何时使用滚轮。

的尝试

以下是我的问题的代码段。

document.getElementById("main").onscroll=function(){
  console.log("scrolled");
  document.getElementById("scrolled").innerHTML="true";
}

#main {
  width:100px;
  height:100px;
  border:1px solid #000;
  overflow:hidden;
}

.object {
  width:100%;
  height:75%;
    background:rgba(0,0,0,0.1);
}

<div id="main">
    <div class="object"></div>
    <div class="object"></div>
    <div class="object">Can't see me.</div>
</div>
(The objects inside are expanding, it's just hidden)<br>
Try scrolling (with scroll wheel) in the div, then look below.<br>
Scroll triggered: <span id="scrolled">false</span>

如您所见，没有触发滚动，因为没有滚动条！基本上，我仍然想知道滚轮是否正在使用，我也想知道它是向上还是向下使用。

我的目标是什么？

基本上，我想在我的网站后面创建这个“动态滚动”类型框架。因此，容器是overflow:hidden，但是当触发滚轮（向上或向下）时，它会增加或减少在JavaScript中设置为top:(variable)的变量。

总而言之，我只想要一些能够检测滚轮是否正在使用的东西，这样我才能完成动态滚动脚本。

我知道的事情（所以你不应该向我提及）

我知道有些人已经坏了滚轮，或者甚至没有滚轮。所以在你提到它之前。我的解决方案是在每张幻灯片的底部（或顶部）放置按钮，按钮向下或向上滚动。

其他

解决方案应该是纯javascript ，这意味着没有库！很抱歉让你度过难关，但这就是我的需要。我要做的唯一的接受是如果脚本是长的，而库是缩短的。否则，不，不。

就是这样！

感谢阅读，祝你好运找到解决方案！我也会疯狂地试图找到解决方案。如果我发现任何信息或需要不同的信息，我会更新此帖子以通知您。

随意在评论中提问。

Answer 1

您可以尝试在wheel event上逐步设置位置。每次滚动鼠标滚轮时都会触发此事件。事件属性deltaX，deltaY，deltaZ包含给定方向的移位大小。

代码段http://jsfiddle.net/07516utp/显示感知此事件的滚动增量。

document.addEventListener('wheel', onWheel);

function onWheel(event) {
    document.querySelector('#log').innerHTML = 'event: dx=' + event.deltaX + ' dy=' + event.deltaY + ' dz=' + event.deltaZ;
}