javascript - 滚动条显示和隐藏时页面跳转

Question

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

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

我可以隐藏和显示动画，如平滑(我认为我不可能尝试过)或其他任何东西。请帮我找到解决方案。

<强> demo

<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;