我正在尝试模拟终端滚动行为，它只是立即将 View 移动 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>选项卡和控件部分将粘在浏览器中各自的边缘，并且imgView将不可见，除非某些代码调用通过更改其位置相关属性来实现。
我这样做是为了让正文有 overflow: hide;，我无法使用将当前滚动位置与前一个滚动位置进行比较的方法。
最佳答案
只需监听滚动事件，然后向上或向下滚动 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;
});
关于javascript - 如何使用javascript检测不可滚动元素中的滚动事件和方向？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37019995/