如何使用JavaScript检测不可滚动元素中的滚动事件和方向？
[英]How to detect scroll event and direction in a not scrollable element using javascript?
问题描述
I am trying to simulate Terminal scroll behavior, which just immediately move the view by 3 lines, without smooth scrolling animation. 
我正在尝试模拟终端滚动行为，该行为会将视图立即移动3行，而没有平滑的滚动动画。
Here is my simplified CSS and HTML structure: 这是我的简化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>
The section tabs and controls will be sticking to their respective edges in the browser, and imgView will not be visible unless some code calls it by changing its position related properties. 部分tabs和controls将在浏览器中imgView在其各自的边缘，除非某些代码通过更改与位置相关的属性来调用imgView否则imgView将不可见。
I made it so body has overflow: hidden; 我做到了，身体overflow: hidden; , I can't use methods of comparing current scroll position with previous one. ，我无法使用将当前滚动位置与上一个滚动位置进行比较的方法。
2 个解决方案
解决方案1
1 已采纳 2016-05-07 10:55:12
I found this site explaining about mousewheel or DOMMouseScroll event. 我发现这个网站解释关于mousewheel或DOMMouseScroll事件。
An example on that site is an image container zooms in and out when you scroll on the container. 该站点上的一个示例是，当您在图像容器上滚动时，图像容器会放大和缩小。 So I took the example and let it scroll the body element below. 因此，我以示例为例，让它滚动了下面的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>
解决方案2
0 2016-05-04 06:56:22
Just listen for the scroll event and then scroll 3 lines up or down. 只需侦听滚动事件，然后向上或向下滚动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;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用Javascript检测元素的文本方向？ - How to detect text direction of element using Javascript?
如何在可滚动元素上侦听滚动事件？ - How to listen to scroll event on a scrollable element?
如何检测滚动框（html元素）是否可滚动 - How can you detect if a scroll box (html element) is scrollable
Javascript-滚动方向在addEventListener'scroll'中检测 - Javascript - scroll direction Detect in addEventListener 'scroll'
javascript-如何在iframe中检测滚动事件？ - javascript-How to detect scroll event in iframe?
使用Javascript将HTML元素平滑滚动到特定方向 - Scroll HTML element smoothly to a specific direction using Javascript
如何使用Javascript滚动到元素？ - How to scroll to an element using Javascript?
如何使用 javascript 滚动元素？ - how to scroll an element using javascript?
如何使用 javascript 将滚动条移动到顶部/向上方向？ - How to move scroll into top/up direction by using javascript?
事件发生后如何使用React滚动到某个元素？ - How to scroll to an element using React after an event?
相关标签