Jak dowiedzieć się, czy użytkownik przewija się do góry lub do dołu w przewijalnym pojemniku?

Czy jQuery oferuje wszelkie mechanizmy?

Css:

#container {
    display: block;
    width: 250px;
    height: 25px;
    background: green;
}
#scrolling {
    width: 250px;
    height: 300px;
    backround: red;
    overflow: auto;
}

http://jsfiddle.net/hmaf2/2/

Wielkie dzięki!

Poklepać

3
wzr1337 23 sierpień 2012, 18:51

3 odpowiedzi

Najlepsza odpowiedź

Możesz przetestować pozycję przewijania przez porównanie Wysokość, przewijalna wysokość i przewijanie offset div:

$(document).ready(function(){
    $('#scrolling').scroll(function(){
        var scrollTop = $(this).scrollTop();
        var iheight = $(this).innerHeight();
        var sheight = this.scrollHeight;
        var text = '';
        if (scrollTop <= 5) {
            text = 'top';
        }
        else if (scrollTop+5 >= sheight-iheight) {
            text = 'bottom';
        }
        else {
            text = scrollTop+' middle ('+iheight+','+sheight+')';
        }
        $('#result').text(text);
    });
});

Fiddle
Ten przykład zarezerwował 5 pikseli z góry i dołu marginesu Div.

1
Community 23 maj 2017, 11:58
$('#somediv').scrollTop()

Powie ci pozycję z góry

-edytować-

$('#somediv').scroll(function(){
    if($('#somediv').scrollTop()==0){
        console.log('top')
    }
})
3
ChrisThompson 23 sierpień 2012, 14:55

Tak, możesz uzyskać dostęp do bieżącej przewijaj górę wartość przewijania.

Tutaj działa, jest JSFiddle.

$('#scrolling').scroll(function() {
   var scrollTop = $(this).scrollTop();
   console.log(scrollTop);
});​
2
Barlas Apaydin 23 sierpień 2012, 14:57