Problem z wysokością jScrollPane 2.0 w chrome

Question

Używam elementu div z klasowym panelem przewijania (wysokość 100%) w obrębie div o bezwzględnej pozycji. Arkusz panelu przewijania zawiera najpierw tekst, a następnie obraz, a następnie ponownie tekst. Wysokość obrazu jest ustawiona na 200 pikseli. Problem jest! Jeśli przeglądam tę przewijkę w Chrome (najnowsza wersja), czasami mogę przewijać całą treść, a czasami po odświeżeniu witryny w przeglądarce nie. Nie oznacza to, że widzę tylko część drugiego tekstu, a nie więcej. W związku z tym faktyczna wysokość przewijania kurczy się. Jeśli znów się odświeżę, być może będę mógł zobaczyć, że wszystko jest kompletne i tak dalej. Zmienia się za każdym razem, gdy odświeżam przeglądarkę. Dzieje się tak tylko w Chrome.

Jakiś pomysł, co mogę zrobić, aby tego uniknąć? Dzięki .....

UPDATE To naprawdę ma coś wspólnego z tym, jak importuje się (js i css) w nagłówku. Masz rację, css musi zostać zaimportowany przed jscrollPane js, ale to także oznacza, że ​​wysokość obrazu musi pochodzić z jednego z arkuszy stylów CSS. Nie możesz zdefiniować wysokości bezpośrednio w znaczniku obrazu w swoim znaczniku. Moim rozwiązaniem było stworzenie klasy, na przykład img200 (reprezentującej wysokość 200px) w moim arkuszu stylów i to się udało. Oto co trzeba zrobić, aby działało w przeglądarce Chrome lub lepiej ogólnie w przeglądarkach Webkit: Skonfiguruj klasę wysokości obrazu w arkuszu stylów dla obrazów, które są używane w panelu przewijania. Dołącz swój arkusz stylów przed !!!!! javascript dla jScrollPane. Dodaj specjalną klasę wysokości do wszystkich dołączonych zdjęć do jScrollPane To wszystko. Jeszcze raz dziękuję za szybką odpowiedź. Bardzo fajny.

OSTATECZNA AKTUALIZACJA ROZWIĄZANIA !!!!!!!!!
Jeśli masz zdjęcia w obszarze jScrollPane, upewnij się, że poniższe informacje są dobrze widoczne w przeglądarce Webkit, takiej jak Chrome lub Safari. W przeciwnym razie spowoduje to problemy z wysokością i tylko część zawartości będzie widoczna.
To, co trzeba zrobić:
Upewnij się, że linia się od swoich arkuszy stylów CSS i JavaScript w JScrollPane plik jest poprawny. Plik javascript jScrollPane musi podążać za arkuszami stylów CSS, a nie odwrotnie! Musisz również dodać wysokość do każdego obrazu zawartego w obszarze jScrollPane. Możesz to zrobić, tworząc klasę css lub możesz dodać wymiar jako atrybut bezpośrednio do pliku img w znacznikach HTML.
Jeśli będziesz o tym pamiętać, to wystarczy.

Answer 1

Czy testowałeś również w Safari? To brzmi jak problem, który występuje w Webkit gdy javascript jest włączony przed CSS w nagłówku dokumentu: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

Jeśli to nie jest przyczyną to może być coś związane z faktem, że masz obraz w twojej scrollpanie. Należy podać szerokość i wysokość obrazu (zob. http://jscrollpane.kelvinluck.com/image2.html) lub automatycznie ponownie zainicjować panel (patrz http://jscrollpane.kelvinluck.com/image.html).

Nadzieja to pomaga :)

Answer 2

Jeśli masz obraz wewnątrz obszaru JScrollPane div, wystarczy określić jego wysokość i szerokość.

<div class="scroll-pane"> 
<img src="image.jpg" alt="" width="300" height="50" /> 
</div> 

To naprawi błąd webkit jScrollPane.No i oczywiście załadować CSS przed JS

Answer 3

dać wezwanie do JScrollPane w $(window).load zamiast $(document).ready

Answer 4

I odkryli również, że dodanie reguły css .scroll-okienko do line-height rozwiązuje moje problemy wysokości.

Na przykład:

.scroll-pane {line-height: 1;} 

lub cokolwiek linia wysokość treść może potrzebować.

Odkryłem również, że jeśli użyjesz @ font-face, jscrollpane może wykonać obliczenie wysokości, zanim czcionka zostanie poprawnie załadowana, a zatem błędnie obliczyć. Naprawiłem to dodając ustawienie:

autoReinitialise: true 

Działa na zegar chociaż więc używać w zamyśleniu.