Question

这是一个div，包含图像，最大高度：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个不同的图像时（可能是一些加载时间问题？）。

事实上，在Chrome和Safari上，scrollHeight的输出并不总是相同。对于FF，我总是得到相同的结果。

任何想法都会受到赞赏！

修改：忘记了示例链接：http://toolboxebz.free.fr/test_scroll/test.html

Answer 1

我认为你应该将你的js函数包装在document.ready中或使用类似imageloaded的东西，正如你所说的行为不是确定性的，这是因为当你的函数运行时，图像可能尚未在浏览器中完全加载。

包含图像的div的scrollHeight值

1 个答案: