Odpowiedź StanleyH była doskonała, ale miała jeden niefortunny błąd: kliknięcie zacienionego obszaru paska przewijania nie powoduje już przejścia do zaznaczenia, które kliknąłeś. Zamiast tego otrzymujesz bardzo mały i nieco irytujący przyrost pozycji paska przewijania.
Przetestowano: 4 wersje przeglądarki Firefox (w 100%), 4 wersje przeglądarki Chrome (w 50%).
Oto mój jsfiddle . Możesz obejść ten problem, mając zmienną on / off (prawda / fałsz), która pozwala na wyzwolenie tylko jednego zdarzenia onScroll () w danym momencie:
var scrolling = false;
$(".wrapper1").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper2")
.scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
if(scrolling) {
scrolling = false;
return true;
}
scrolling = true;
$(".wrapper1")
.scrollLeft($(".wrapper2").scrollLeft());
});
Zachowanie problemowe z zaakceptowaną odpowiedzią:
Właściwie pożądane zachowanie:
Więc dlaczego tak się dzieje? Jeśli przejdziesz przez kod, zobaczysz, że wrapper1 wywołuje scrollLeft wrapper2, a wrapper2 wywołuje scrollLeft wrapper1 i powtarzamy to w nieskończoność, więc mamy problem z nieskończoną pętlą. Albo raczej: ciągłe przewijanie użytkownika powoduje konflikt z wywołaniem przewijania przez wrapperx, pojawia się konflikt zdarzeń i wynikiem końcowym nie jest przeskakiwanie pasków przewijania.
Mam nadzieję, że to pomoże komuś innemu!