Question

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

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

要么我可以隐藏和显示动画像平滑（我认为不可能，我已经尝试过）或其他任何东西。请帮我找到解决方案。

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

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

2 个答案: