Wie Scroll-Ereignis und Richtung in einem nicht scrollbaren Element mit Javascript zu erkennen?

Ich versuche Terminal scroll Verhalten zu simulieren, die sofort die Ansicht um 3 Zeilen verschieben, ohne glatte Scroll-Animation.Wie Scroll-Ereignis und Richtung in einem nicht scrollbaren Element mit Javascript zu erkennen?

Hier ist meine vereinfachte CSS und HTML-Struktur:

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>

Der Abschnitt tabs und controls wird im Browser an ihren jeweiligen Kanten kleben, und imgView nicht, es sei denn etwas sichtbar sein code ruft es auf, indem es seine positionsbezogenen Eigenschaften ändert.

Ich machte es so Körper hat overflow: hidden;, ich kann Methoden zum Vergleich der aktuellen Bildlaufposition mit vorherigen nicht verwenden.

Quelle

2016-05-04 Dinir

Ich fand this site über mousewheel oder DOMMouseScroll Ereignis zu erklären.

Ein Beispiel auf dieser Website ist ein Bild-Container vergrößert und verkleinert, wenn Sie auf dem Container scrollen. Also nahm ich das Beispiel und ließ es das Körperelement darunter scrollen.

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>

Quelle

2016-05-07 10:55:12 Dinir

Hören Sie nur auf das Bildlaufereignis und scrollen Sie dann 3 Zeilen nach oben oder unten.

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; 
});

Quelle

2016-05-04 06:56:22 Moritz

Wie kann ich implementieren dies als 'window.scrollY' wird nicht in meinem Fall ändern? – Dinir

Ich habe die Antwort angepasst, ich hoffe, das hilft – Moritz

Wie Scroll-Ereignis und Richtung in einem nicht scrollbaren Element mit Javascript zu erkennen?

Antwort

Verwandte Themen