页面跳到滚动条上显示和隐藏

Question

我在jsfiddle中有示例代码。 问题是当我单击标题1并打开面板时。 但是内容太长，因此突然显示滚动条。 另外，当我折叠它时，页面突然向后隐藏滚动条。

在此滚动条显示和隐藏期间。 页面看起来像跳跃。

我可以使用诸如Smooth（我认为不可能尝试）之类的动画进行隐藏和显示，或者进行其他操作。 请帮助我找到解决方案。

演示

<div class="bs-example">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.<br> <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以尝试不同的选项：

设置面板主体的最大高度； http://jsfiddle.net/wtrkqx19/2/

.panel-body{
    max-height: 200px;
    overflow: auto;
}

或仅在默认情况下使用来显示滚动条

   overflow-y: auto;

Answer 2

.bs-example {
    position: relative;
}
.panel-group {
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    height:100%;
    z-index: 9;
}