Erstellen Sie eine horizontale Bildlauf in jQuery

Question

Ich habe eine horizontale Bildlauf in einem div, das eine kleine Breite als seine Kinder Breite hat.

ich machte es möglich, mit CSS

div { 
    width: 300px; 
    overflow: auto; 
} 

div p { 
    width: 600px; 
} 

und HTML:

<div> 
    <p> 
    this is very looooooooooong text and very loooonggg paragraph 
    </p> 
</div> 

Ich möchte blättern Hörer hinzufügen, wenn ich nach unten scrollen (von der Maus), dann blättern div Inhalt nach rechts, wenn Scrollen Sie nach oben und scrollen Sie dann den Inhalt von div nach links.

var lastScrollTop = 0; 

$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     // downscroll code 
    } else { 
     // upscroll code 
    } 
    lastScrollTop = st; 
}); 

scheint, dass $(window).scroll zündet nicht.

I erstellt jsfiddle: https://jsfiddle.net/t8Lc4pjs/

, wie das Ereignis ausgelöst und wie Blätter bewegen/rechts auf die Richtung der Maus Scroll hängt nach links?

Answer 1

Verwenden Mausrad Ereignis das Mausrad blättern .. freundlich https://jsfiddle.net/t8Lc4pjs/2/

jQuery

$(document).ready(function(){ 
var i=0; 
    $(document).on('mousewheel', function(e){ 
    if(e.originalEvent.wheelDelta /120 < 0) { 
    console.log('down'); 
    $('.scl').scrollLeft(i++); 
    } 
    else{ 
    console.log('up'); 
    $('.scl').scrollLeft(i--); 
    } 

    }); 
}); 

Hinweis überprüfen, um zu erkennen: Wenn Sie erhöhen blättern wollen etwas schneller den Wert von `i‘ Bit mehr

UPDATE

Ich habe Code Mehrwert zu stoppen von i Breite des div überschreitet und unter 0 und auch aus dem Scroll-Bit schneller kindly Überprüfung dieses https://jsfiddle.net/t8Lc4pjs/3/