IE7 不会在可滚动的 div 中加载内容，直到滚动答案

【问题标题】：IE7 does not load content within scrollable div untill scrollIE7 不会在可滚动的 div 中加载内容，直到滚动
【发布时间】：2013-07-11 18:33:37
【问题描述】：

TL;DR：如何强制 IE7 加载所有被可滚动 div 隐藏的元素？

我正在构建一个“可折叠”菜单来浏览一组页面。这个菜单有 imploded 和 exploded 两种状态。
菜单项就像一本书的章节，当用户浏览内容时，“活动”菜单项会向下移动。
在页面加载时，我希望项目所在的 <div> 立即向下滚动（！）到活动菜单项，减去一些偏移量。

像往常一样，这在 chrome 和 ff 上完美运行，但不适用于 ie7。

在分解状态下，当页面加载时不可见时，ie7 似乎不会“加载”项目。发生的事情是 ie7 在没有滚动条（或非常小的滚动条）的情况下启动菜单 div。当我将 scrollTop 设置为所需数量时。 div 只是向下滚动，直到滚动条“碰撞”到“div 的底部”，然后 ie7 开始加载下一部分内容，我可以进一步滚动，直到找到另一个“底部”，等等。

我设法通过使用长度为 1000 毫秒的动画来解决这个问题（刚刚选择了一个数字）。它不符合指定的要求（而且看起来很丑），我想知道如何强制 ie7 在请求之前加载此内容，因为它似乎没有加载它。

IE7 用户是我们最大的目标群体，所以不能跳过。让没有 javascript 的用户可以使用东西是一个巨大的优势。

在内爆状态下没有问题，我尝试在爆炸状态下使用部分内爆状态 CSS，然后将它们设置为正确的值，但没有帮助。

这里有一些代码：

scrollToCurrent = function(length){
    var prev = $("div.scroller div.selected").prev();

    // Check if previous exists
    if($(prev).length > 0) {
        // number of previous items * height of an item - half an items height
        var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight() / 2);

        if(length === 0) {
            $("div.scroller").scrollTop(scrollY);
        } else {
            $(".scroller").animate({
                scrollTop : scrollY
            }, length);
        }
    }
};

【问题讨论】：

IE7 users are our largest target group — 认真的吗？你有一个悲伤的现实。顺便说一句，你已经尝试了一些插件？我知道，这不是你真正的问题，但可以节省时间 - 即使与保守的人一起工作。要完成，take a look here — 这对您来说是一个非常好的选择。最后，为了帮助您解决真正的问题，您可以发布一个 jsFiddle 吗？
IE7 users are our largest target group 我认为你是唯一拥有 IE7 的人... 0.8 % 拥有 IE7...
那 0.8% 将是我们的目标群体，我情不自禁。我会看看我是否可以组合一个 jsFiddle。好好看看那个插件。
昨天我设法通过在菜单底部放置一个额外的（虚拟）菜单项来修复它。我们正准备推送到现场环境，但今天早上它又坏了，同样的问题。
IE7 似乎在小提琴中正常工作。我注意到的另一件事是它在“选定”项目“离开”页面后开始正常工作。 IE7 也适用于小提琴，看起来这个问题对于 SO 来说过于本地化了。

标签： jquery html css internet-explorer-7

【解决方案1】：

更新

最终的解决方案被证明非常简单。由于似乎没有任何效果并且修复一种情况会破坏另一种情况（所选项目最初是否可见之间存在重大差异），我决定将 sh*t 从滚动条中删除：

我删除了所有旧的“修复”

scrollToCurrent = function(length){
        var prev = $("div.scroller div.selected").prev();

        // Check if previous exists
        if($(prev).length > 0) {
            // number of previous items * height of item - half an items height
            var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight() / 2);

            if(length === 0) {
                var i = 0;
                var maxpushes = 100;

                // Push just as long as needed to get the scrollbar to where we want it to (fixes ie7 issue)
                while($("div.scroller").scrollTop() < scrollY) {
                    $("div.scroller").scrollTop(scrollY);

                    // Make sure it can never turn into an endless loop
                    i++;
                    if( i > maxpushes) {
                        break;
                    }
                }
            } else {
                $(".scroller").animate({
                    scrollTop : scrollY
                }, length);
            }
        }
    };

旧的非工作尝试

我设法将它作为一个额外的项目来“修复”它：UPDATED FIX BELOW

    <div class="cycle inactive">
        <?php // I fix IE7 issues ?>
    </div>

我认为<div> 中的换行符完成了 99% 的工作。所以把那条线保留在那里。

我不认为这是“解决”问题，我会留下这个问题，首先我希望这件事能稳定一段时间。

编辑：

嗯，这个“重大更新”刚刚扭转了这个问题（即 imploded 停止工作，exploded 工作）。更新修复：

<?php // Only show if menu starts exploded ?>
<?php if( ! $imploded): ?>
    <div class="cycle inactive">
        <?php // I fix IE7 issues ?>
    </div>
<?php endif; ?>

【讨论】：