时间戳

首页 > 解决方案 > 防止页面在折叠的手风琴部分向上滚动。引导程序 4

javascript - 防止页面在折叠的手风琴部分向上滚动。引导程序 4

问题描述

它是一个 bootstrap 4 手风琴，主体部分比平时大，这就是为什么当部分折叠下面的内容时，它会随之向上滚动。

我正在使用此代码滚动到单击标题的顶部并取消由先前打开的部分折叠引起的滚动。

但它似乎在前一个崩溃之前运行。我在互联网上进行了研究，无法找到解决方案。

代码很长，分享相关的片段。在单击标题时还使用 ajax 填充卡体。 

                <div id="accordion" class="row"></div>
                <script>
                    success: function(res) {
                        let resultHtml = ``;
                        for (let i = 0; i < res.length; i++) {
                            resultHtml +=
                            `
                            <div class="card col-12 px-0">
                                <div class="card-header" id="heading${i}">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse${i}" data-place-id="${ res[i].place_id }" aria-expanded="false" aria-controls="collapse${i}"><img class="place-icon" src="${ res[i].icon }">
                                      ${ res[i].name }
                                    <span class="float-right">Rating: ${ getStars(res[i].rating) }</span>
                                    </button>
                                  </h5>
                                </div>
                                <div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#accordion">
                                    <div class="card-body"></div>
                                </div>
                            </div>`;
                     }
                     $("#accordion").html(resultHtml);



                     $('#accordion').on('hide.bs.collapse', function () {
                        $('html, body').animate({
                            scrollTop: $( event.target ).parent().offset().top
                        }, 400);                            
                });

              </script>

shown.bs.collapse并且hidden.bs.collapse不为我工作。 show.bs.collapse并且hidde.bs.collapse正在射击，但仍然没有工作。

谢谢你

标签： javascriptjquerytwitter-bootstrapcollapse

解决方案

仅当卡体的内容比浏览器长时才会发生。同时它仅在您使用 data-parent 时发生。

由于带有打开卡体的卡头在页面上方，因此折叠组件将下方的所有内容推到其位置。在某种程度上，它做了它应该做的事情。

所以有一个选择。要么您必须在打开另一张卡片时放弃关闭打开的卡片（不使用 data-parent），要么使用将卡片标题滚动到顶部的脚本，这是我的选择。

我知道这不是您期望的答案，但在有人找到更好的解决方案之前，这些选择是我们最好的选择。

推荐阅读