Question

我正在使用Bootstrap 4网格布局。有一个主容器，其中的数据正在使用Ajax重新加载/更新。通过分页加载容器的内容之后，在屏幕底部，我正在扩展最后一张卡，扩展向上。向上滚动然后向下滚动之后，它向下滚动。此问题仅在Chrome中发生。我在IE / Edge / Firefox上进行了测试，它可以按预期工作。

这就是正在发生的事情。请注意右侧的滚动条。

导航到第二页 点击展开箭头

预期结果： 卡向下扩展，滚动条保持在原位。从顶部到其自身的距离保持不变。

实际结果： 感觉好像卡在向上折叠。滚动条保持在底部，并且从顶部到其自身的距离增加，就像滚动条卡在底部一样。

这是布局：

isTRUE(all.equal(xx, ~0))
#[1] TRUE

JS：

<div class="main" id="main">
    <div class="container">...</div> <!--some container-->
    <div class="container"> <!--one of the many cards-->
        <div class="row">
            <div class="col-12">
                <div class="card d-flex flex-column">
                    <div class="expand visible">
                        <a href="#" class="text-primary float-right" data-toggle="collapse" data-target="#collapse_149" aria-expanded="false" aria-controls="collapse_149"><i class="fas fa-angle-double-down"></i></a>
                    </div>
                    <div class="card-body bg-white">
                        <div class="row justify-content-center align-items-center">
                            <div class="col-12 col-sm-3">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12 col-sm-3 pt-1">...</div>
                            <div class="col-12">
                                <div class="row pt-2">
                                    <div class="col">
                                        <div class="collapse" id="collapse_149">
                                            <div class="row">
                                                <div class="col-12 pt-2">...</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">...</div> <!-- navigation container --> 
</div>

结果就是您在$.post( 'path', { params }, function (result) { $('#main').html(result); } );类中看到的所有内容。

我可以通过以下方式解决该问题：main。但这是在避免而不是解决问题。

我什至不确定是什么引起了问题。是Chrome，Bootstrap 4折叠还是异步Ajax调用？我假设在更新$(window).scrollTop($(window).scrollTop() - 1)中的内容之后，以某种方式在Chrome中将屏幕上的位置“固定”到页面底部。

我想了解导致问题的原因并相应解决。

也许值得一提。第1页上的卡的总高度大于第2页上的高度。这是由于某些卡具有更多信息。可能是Chrome正在计算初始窗口高度，然后它没有重新计算第2页的高度，而是仅在滚动了一点之后才计算。

用ajax更新div的内容后，card向上扩展而不是向下扩展

0 个答案: