Zsynchronizowane przewijanie za pomocą jQuery?
Próbuję zaimplementować zsynchronizowane przewijanie dla dwóch osóbDIV
z następującym kodem.
$(document).ready(function() {
$("#div1").scroll(function () {
$("#div2").scrollTop($("#div1").scrollTop());
});
$("#div2").scroll(function () {
$("#div1").scrollTop($("#div2").scrollTop());
});
});
#div1
i#div2
ma taką samą treść, ale, powiedzmy, różne rozmiary
#div1 {
height : 800px;
width: 600px;
}
#div1 {
height : 400px;
width: 200px;
}
Z tym kodem stoję przed dwoma problemami.
1) Przewijanie nie jest dobrze zsynchronizowane, ponieważ div mają różne rozmiary. Wiem, to dlatego, że bezpośrednio ustawiamscrollTop
wartość. Muszę znaleźć procent przewijanej zawartości i obliczyć odpowiedniescrollTop
wartość dla drugiegodiv
. Nie jestem pewien, jak znaleźć rzeczywistą wysokość i aktualną pozycję przewijania.
2) Ten problem występuje tylko wfirefox
. W Firefoksie przewijanie nie jest płynne, jak w innych przeglądarkach. Myślę, że ponieważ powyższy kod tworzy nieskończoną pętlę zdarzeń przewijania. Nie jestem pewien, dlaczego tak się dzieje tylko z firefoxem. Czy istnieje sposób na znalezienie źródła zdarzenia scroll, dzięki czemu mogę rozwiązać ten problem.
Każda pomoc byłaby bardzo mile widziana.