如何使用JavaScript檢測不可滾動元素中的滾動事件和方向？
[英]How to detect scroll event and direction in a not scrollable element using javascript?
問題描述
我正在嘗試模擬終端滾動行為，該行為會將視圖立即移動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在其各自的邊緣，除非某些代碼通過更改與位置相關的屬性來調用imgView否則imgView將不可見。
我做到了，身體overflow: hidden; ，我無法使用將當前滾動位置與上一個滾動位置進行比較的方法。
2 個解決方案
解決方案1
1 已采納 2016-05-07 10:55:12
我發現這個網站解釋關於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>
解決方案2
0 2016-05-04 06:56:22
只需偵聽滾動事件，然后向上或向下滾動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-滾動方向在addEventListener'scroll'中檢測
[英]Javascript - scroll direction Detect in addEventListener 'scroll'
使用Javascript將HTML元素平滑滾動到特定方向
[英]Scroll HTML element smoothly to a specific direction using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.