如何使用 javascript 检测不可滚动元素中的滚动事件和方向？

Question

我正在尝试模拟终端滚动行为，即立即将视图移动 3 行，而没有流畅的滚动动画。

这是我简化的 CSS 和 HTML 结构：

body {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2em;
}
section {
  width: 100%;
}
section#tabs {
  position: fixed;
  top: 0;
  background-color: grey;
}
section#main {
  margin: 15px 0;
}
section#controls {
  position: fixed;
  bottom: 0;
  background-color: grey;
}
section#imgView {
  position: fixed;
  top: 100%;
  background-color: red;
}

<html>
  <body>
    <article>
      <div data-reactroot>
        <section id="tabs">
          <span>[abc]</span>
          <span>[bcd]</span>
          <span>[cde]</span>
          <span>[def]</span>
          <span>[efg]</span>
        </section>
        <section id="main">
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
        </section>
        <section id="controls">
          <div>This will always be at the bottom.</div>
        </section>
        <section id="imgView">
          <div>You're not supposed to see this sentence.</div>
        </section>
      </div>
    </article>
  </body>
</html>

tabs 和 controls 部分将粘在浏览器中各自的边缘，并且 imgView 将不可见，除非某些代码通过更改其位置相关属性来调用它.

我做到了 body 有 overflow: hidden;，我不能使用比较当前滚动位置和前一个滚动位置的方法。

Answer 1

只需监听滚动事件，然后向上或向下滚动 3 行。

var lineHeight = 18;
var scrollStep = lineHeight * 3;
var lastScrollY = 0;
var scrollContainer = document.querySelector("#main");

scrollContainer.addEventListener("scroll", function () {
    if (scrollContainer.scrollTop > lastScrollY) {
        scrollContainer.scrollTop = lastScrollY + scrollStep;
    } else if (scrollContainer.scrollTop < lastScrollY) {
        scrollContainer.scrollTop = lastScrollY - scrollStep;  
    }

    lastScrollY = scrollContainer.scrollTop;
});

Answer 2

我发现 this site 解释了 mousewheel 或 DOMMouseScroll 事件。

该站点上的一个示例是当您在容器上滚动时图像容器会放大和缩小。所以我拿了这个例子，让它滚动下面的 body 元素。

var body = document.body;

var MouseWheelHandler = function(e) {
  // these codes make it so `delta` return 1 for up and -1 for down in any browser exclude Safari.
  var e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  
  // to cancel the normal scrolling behavior
  e.preventDefault();
  
  if(delta===-1) { body.scrollTop += 45; }
  if(delta===1) { body.scrollTop -= 45; }
  
  // this is meant to cancel the normal scrolling behavior. Doesn't work here...
  return false;
}

if (body.addEventListener) {
  // IE9, Chrome, Safari, Opera
  body.addEventListener("mousewheel", MouseWheelHandler, false);
  // Firefox
  body.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
  // IE 6~8
} else body.attachEvent("onmousewheel", MouseWheelHandler);

body {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2em;
}
section {
  width: 100%;
}
section#tabs {
  position: fixed;
  top: 0;
  background-color: grey;
}
section#main {
  margin: 15px 0;
}
section#controls {
  position: fixed;
  bottom: 0;
  background-color: grey;
}
section#imgView {
  position: fixed;
  top: 100%;
  background-color: red;
}

<html>
  <body>
    <article>
      <div data-reactroot>
        <section id="tabs">
          <span>[abc]</span>
          <span>[bcd]</span>
          <span>[cde]</span>
          <span>[def]</span>
          <span>[efg]</span>
        </section>
        <section id="main">
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>some texts that is long enough to make this snippet properly represent some shape I want to show</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
          <div>another texts to tell the difference on the height</div>
        </section>
        <section id="controls">
          <div>This will always be at the bottom.</div>
        </section>
        <section id="imgView">
          <div>You're not supposed to see this sentence.</div>
        </section>
      </div>
    </article>
  </body>
</html>

如何使用 javascript 检测不可滚动元素中的滚动事件和方向？

How to detect scroll event and direction in a not scrollable element using javascript?

javascript

scroll

overflow