Вот div, содержащий изображения, с max-height: 300px. Всякий раз, когда требуется полоса прокрутки (здесь и здесь), я хочу добавить второй div (серый) рядом с первым. Я использую scrollHeight для проверки наличия полосы прокрутки.
<div class="container">
<div class="pictures">
<img src="test1.jpg" /> <img src="test2.jpg" /> <img src="test3.jpg" /> <img src="test4.jpg" />
<img src="test5.jpg" /> <img src="test6.jpg" /> <img src="test7.jpg" /> <img src="test8.jpg" />
<img src="test9.jpg" /> <img src="test10.jpg" /> <img src="test11.jpg" /> <img src="test12.jpg" />
<img src="test13.jpg" /> <img src="test14.jpg" /> <img src="test15.jpg" /> <img src="test16.jpg" />
<img src="test17.jpg" /> <img src="test18.jpg" /> <img src="test19.jpg" /> <img src="test20.jpg" />
<img src="test21.jpg" /> <img src="test22.jpg" />
</div>
<div class="scroll"></div>
</div>
Некоторые CSS:
div.container {
width: 410px;
max-height: 300px;
overflow: auto;
}
div.container div.pictures {
float: left;
width: 390px;
}
div.container div.scroll {
display: none;
float: left;
width: 30px;
background-color: #eee;
}
И JS:
$(function() {
$(".scroll").each(function() {
var iParentHeight = $(this).parent()[0].scrollHeight;
if (iParentHeight > $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
var iWidth = $(this).parent().width()+$(this).width();
$(this).parent().css("width", iWidth);
$(this).show();
$(this).height(iParentHeight);
}
});
});
На Firefox это работает. Однако в Chrome и Safari существует некоторая проблема: иногда (на самом деле, большую часть времени для Safari) серое погружение не появляется, когда нужно.
Я сделал несколько тестов: без изображений, с X-временем одного и того же изображения и с X различными изображениями. Проблема возникает только при наличии X разных изображений (может быть, проблема с загрузкой?).
Фактически, вывод scrollHeight не всегда одинаковый в Chrome и Safari. Для FF я всегда получаю тот же результат.
Любая идея была бы оценена!
Изменение: забыли ссылку с примера: http://toolboxebz.free.fr/test_scroll/test.html
Я думаю, что вы должны обернуть вашу js-функцию в document.ready
или использовать что-то вроде imageloaded, поскольку вы сказали, что поведение не является детерминированным, что из-за того, что при запуске вашей функции изображения могут быть еще не полностью загружены в браузере,