2017-09-26 11 views
3

Welchen Code würde ich hinzufügen, um einen Codeblock auszulösen, wenn das div nach links gescrollt wird?Links JavaScript erkennen JavaScript

<script> 
(function() { 
    function scrollH(e) { 
     e = window.event || e; 
     var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
     document.getElementById('myDiv').scrollLeft -= (delta * 40); 
     e.preventDefault(); 
    } 
    if (window.addEventListener) { 
     window.addEventListener("mousewheel", scrollH, false); 
     window.addEventListener("DOMMouseScroll", scrollH, false); 
    } else { 
     window.attachEvent("onmousewheel", scrollH); 
    } 
    if "scrollingLeft" { 
     // do something 
    } 
    else 
    { 
     // do something else 
    } 
})(); 
</script> 

Bisher habe ich ohne Erfolg folgendes versucht:

var isleft = e.delta < 0; 
if isleft = true { do something } 

Antwort

1

Diese Lösung wird das DOM-Ereignis erkennen. Die div muss nicht einige Scrolling Bars

Sie haben sollte die Scroll-Richtung mit diesem Code-Schnipsel erfassen können:

$(window).on('DOMMouseScroll mousewheel', function (e) { 
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDeltaX < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY 
    //scroll right 
    console.log("RIGHT"); 
    } else { 
    //scroll left 
    console.log("LEFT"); 
    } 

    //prevent page fom scrolling 
    return false; 
}); 

Es sollte funktionieren mit allen Browsern. Wenn Sie horizontale Richtung erfassen müssen, ersetzen wheelDeltaX mit wheelDeltaY

Wenn Sie die Scroll-Richtung und lassen Sie die Seite blättern erkennen wollen, return true am Ende

2

Wie here angegeben Sie horizontales Scrollen durch handhaben kann:

$("#someContainer").on("scroll", function (e) { 
    horizontal = e.currentTarget.scrollLeft; 
    vertical = e.currentTarget.scrollTop; 
}); 

In diesem Fall ist diese binden alle Arten Scroll-Ereignisse auf diesem Element, so dass Sie auch

behandeln können Vertikal von e.currentTarget.scrollTop

und

horizontal von e.currentTarget.scrollLeft

+0

Es sollte auch funktionieren, aber nur, wenn die Seite wirklich scrollt –