Проблема высоты jScrollPane 2.0 в Chrome

Question

Я использую элемент div с панелью прокрутки класса (высота 100%) внутри элемента с абсолютным позиционированием.Div панели прокрутки сначала содержит некоторый текст, затем изображение и снова текст.Высота изображения установлена ​​на 200 пикселей.Проблема есть!Если я просматриваю панель прокрутки в Chrome (последняя версия), я иногда могу прокрутить весь контент, а иногда, после обновления сайта в браузере, нет.Не означает, что я могу видеть только часть второго текста и не более.Таким образом, фактическая высота прокрутки уменьшается.Если я обновлюсь снова, я смогу увидеть все это снова и так далее.Он меняется каждый раз, когда я обновляю браузер.Это происходит только в Chrome.

Есть идеи, что я могу сделать, чтобы избежать такого поведения?Спасибо .....

ОБНОВЛЕНИЕ Это действительно имеет какое-то отношение к тому, как импорт (js и css) выстроен в заголовке.Вы правы, CSS должен быть импортирован до jscrollPane js, но это также означает, что высота изображения должна исходить из одной из таблиц стилей CSS.Вы не можете определить высоту прямо внутри тега изображения в вашей разметке.Моим решением было создать класс для img200 (представляющий высоту 200 пикселей) в моей таблице стилей, и это помогло.Итак, еще раз, что нужно сделать, чтобы он работал в Chrome или в лучших браузерах Webkit в целом: Установите класс высоты изображения в вашей таблице стилей для изображений, которые используются в scrollPane.Включите свою таблицу стилей раньше !!!!!JavaScript для jScrollPane.Добавьте специальный класс высоты ко всем изображениям, которые вы включаете в jScrollPane.Еще раз спасибо за ваш быстрый ответ.Очень круто.

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ РЕШЕНИЯ !!!!!!!!!
Если у вас есть изображения в области jScrollPane, вы должны убедиться в следующем, чтобы они быливсе хорошо отображается в браузере webkit, например, Chrome или Safari.В противном случае это вызовет проблемы с высотой, и будет видна только часть вашего контента.
Это то, что вам нужно сделать:
Убедитесь, что вашТаблицы стилей CSS и javascript-файл jScrollPane верны.Javascript-файл jScrollPane должен следовать вашим таблицам стилей CSS, а не наоборот!Также вы должны добавить высоту для каждого изображения, которое включено в область jScrollPane.Вы можете сделать это либо путем создания класса css, либо добавить измерение в качестве атрибута непосредственно к img в разметке html.
Если вы помните об этом, это поможет.

Answer 1

Вы тоже тестировали в Safari? Это звучит как проблема, которая возникает в Webkit, когда JavaScript включен перед CSS в заголовке документа: http://jscrollpane.kelvinluck.com/faqs.html#webkit-broken

Если это не причина, то это может быть связано с тем, что у вас есть изображение в вашей полосе прокрутки. Вам необходимо либо указать ширину и высоту изображения (см. http://jscrollpane.kelvinluck.com/image2.html), либо выполнить автоматическую повторную инициализацию панели (см. http://jscrollpane.kelvinluck.com/image.html).

).

Надеюсь, это поможет:)

Answer 2

вызовите jscrollpane в $(window).load вместо $(document).ready

Answer 3

Я также обнаружил, что добавление правила CSS к .scroll-pane для высоты строки решает мои проблемы с высотой.

Например:

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

или любой высоты строки, которая может понадобиться вашему контенту.

Я также обнаружил, что если вы используете @ font-face, jscrollpane может выполнить вычисление высоты до того, как ваш шрифт будет правильно загружен, и, следовательно, просчитаться. Я исправил это, добавив параметр:

autoReinitialise: true

Он работает по таймеру, хотя и используйте его вдумчиво.

Answer 4

Если у вас есть изображение в вашей области div jScrollPane, просто определите его ширину и высоту.

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

Это исправит ошибку webScit jScrollPane.Да, и, конечно, загрузить CSS до JS