Question

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

我正在构建一个“可折叠”菜单来浏览一组页面。此菜单有两个崩溃和爆炸状态。
菜单项类似于书的章节，当用户通过内容“活动”菜单项向下移动时进行。
在页面加载时，我希望项目所在的<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);
        }
    }
};

如果您还需要，请与我联系。

编辑：基本的jsfiddle： http://jsfiddle.net/AmazingDreams/keeUY/ http://jsfiddle.net/AmazingDreams/keeUY/embedded/result/

Answer 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);
            }
        }
    };

没有工作的老人

我设法通过将此作为额外项目来“修复”它：更新后的修正

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

我认为<div>中的换行完成了99％的工作。所以保持那条线。

我不认为这是''修正'，我会把这个问题保持开放，首先我希望这件事能稳定一段时间。

编辑：

嗯，这个'重大更新'刚刚解决了问题（即内爆停止工作，爆炸工作）。更新了修复程序：

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

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

1 个答案: