Bootstrap 4.4.1 手风琴滚动行为/错误（？） - Chrome答案

【问题标题】：Bootstrap 4.4.1 Accordion Scroll Behaviour / Bug(?) - ChromeBootstrap 4.4.1 手风琴滚动行为/错误（？） - Chrome
【发布时间】：2020-11-24 09:24:03
【问题描述】：

我使用 Bootstrap 手风琴已经有一段时间了，但直到最近才注意到这个问题。

如果你运行下面的 sn-p（最好是整页），向下滚动直到手风琴出现，然后切换中间的卡片打开，页面滚动不自然（你会知道我的意思是什么时候你看）。

该问题似乎仅在卡片被切换到下方当前活动卡片时出现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Test</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body style="height: 200vh;">
    <div class="container-fluid text-center d-flex bg-light" style="height: 500px">
        <div class="row align-items-center mx-auto">
            <div class="col">
                <p class="my-auto mb-0">Container to push accordion down.</p>
            </div>
        </div>        
    </div>

    <div class="col-6 offset-3 mt-5">
        <div class="accordion" id="exampleAccordion">
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseOne" aria-expanded="true" aria-controls="exampleAccordionCollapseOne">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseOne" class="collapse show" aria-labelledby="exampleAccordionHeadingOne" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae dicta odio, corrupti minus aliquam repellat unde, sapiente quo ea corporis aut est soluta ad eveniet molestiae magnam fugiat sequi nostrum blanditiis molestias ducimus! Eum iure eveniet magnam ipsam illum reiciendis. Eius itaque neque, vitae non, placeat deserunt id expedita aliquam, quaerat quo laudantium distinctio. Rerum neque laboriosam fugit quis aut, optio obcaecati nam soluta error enim fuga perferendis doloremque pariatur! Tempora est cupiditate nulla, tenetur accusantium corrupti, quia distinctio recusandae obcaecati, voluptatum explicabo et debitis dolorum blanditiis? Nostrum nam tenetur animi amet, recusandae, delectus at magnam porro deserunt facilis ipsam.</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize collapsed" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseTwo" aria-expanded="false" aria-controls="exampleAccordionCollapseTwo">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseTwo" class="collapse" aria-labelledby="exampleAccordionHeadingTwo" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem alias adipisci fugiat tempora enim libero. Dicta, eveniet repellat iusto quae sequi accusamus repellendus id ducimus enim quam iste ullam totam aspernatur eum saepe odit. Dolore culpa impedit cumque quaerat obcaecati commodi necessitatibus minus, sit suscipit dolorum corrupti atque eum expedita tenetur et sint voluptas beatae temporibus optio reiciendis asperiores libero veritatis exercitationem. Repudiandae itaque ullam hic, commodi sapiente in voluptate, maiores corrupti ipsa expedita delectus provident, aliquam eos deleniti! Minima neque vitae laudantium assumenda culpa error temporibus voluptatem enim a? Quae placeat omnis ratione culpa accusantium, incidunt eum aspernatur voluptates!</p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header bg-light" id="exampleAccordionHeadingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-capitalize collapsed" type="button" data-toggle="collapse" data-target="#exampleAccordionCollapseThree" aria-expanded="false" aria-controls="exampleAccordionCollapseThree">
                            Lorem ipsum dolor sit
                        </button>
                    </h2>
                </div>
                <div id="exampleAccordionCollapseThree" class="collapse" aria-labelledby="exampleAccordionHeadingThree" data-parent="#exampleAccordion">
                    <div class="card-body">
                        <p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, ipsum voluptas nobis, soluta molestias repellat aut reiciendis id quae dolorum recusandae temporibus facilis voluptatem. Voluptates neque veniam consectetur itaque reiciendis fugiat sint dolorem perspiciatis, ex soluta culpa unde eum officia libero impedit quae nesciunt. Enim maiores temporibus ab commodi esse similique optio fuga error nulla dolore quaerat saepe libero ipsam neque doloribus aliquid iusto facere, doloremque sunt! Atque quasi dolorum consequatur. Maiores ipsum doloribus est! Quod, facilis. Voluptates dolores eaque excepturi labore assumenda sapiente, adipisci mollitia, autem et laboriosam ea, aspernatur aliquid quo officiis. Architecto ut minus magni animi consectetur.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>   
</body>
</html>

我认为这是最近 Chrome 更新中引入的一个问题，因为今年早些时候甚至去年，我创建的手风琴都运行良好（正确滚动）。

任何帮助/建议将不胜感激！ :)

Gyazo gif 来表达我的意思：https://i.gyazo.com/fc794405faa290ab42b3f71d339cd4cd.mp4

【问题讨论】：

我无法重现该问题。我错过了什么吗？
@AlwaysHelping 您使用的是最新的 Chrome 更新吗？ 84.0.4147.105
是的。 84.0.4147.105
@AlwaysHelping 我在问题中添加了一个 gif 示例
当然！我没有这个问题。一切正常。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

我上面描述的问题确实是在 Chrome 更新中引入的，并且已经报告了here。

发布此问题的日期（2020 年 8 月 4 日），Bootstrap 发布了 v4.5.1，并且滚动故障不再存在。

【讨论】：