Question

我正在使用手风琴。在这里，Accordion功能正在发挥作用。我想在正文内容中插入垂直和水平滚动条。如何在面板体内容中添加滚动条。我已经包含了小提琴和代码。

＆＃13;

html, body {
    background-color:#e9eaed;
}
.content {
    width:960px;
    height:0px;
    margin-right: auto;
    margin-left: auto;
}
.panel-group {
    width:430px;
    z-index: 100;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading {
    width: 430px;
}
.panel-title {
    height:18px
}
.panel-title a {
    float:right;
    text-decoration:none;
    padding: 10px 430px;
    margin: -10px -430px;
}
.panel-body {
    height:830px;
    transform: rotate(90deg);
    transform-origin: 188px 241px 0;
}
.panel-group img {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
.panel-group p {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
.panel-group .panel img {
    margin-left:400px;
    position: absolute;
}

＆＃13;

<div class="container">
    <div class="row">
        <div class="content">
            <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">
                          Accordion 1
                        </a>
                      </h4>

                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p><h1>Title</h1><br>A paragraph of text about something pertinant to the site which people could read should the feel the need to read about it. They could skip it as well but this keeps the initial view a good deal less text heavy, see?<br>- Some Source</p>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

＆＃13;

在这个小提琴中，我想在主体内容中插入滚动条。请帮帮我怎样才能做到这一点。

Answer 1

对于面板体内部的简单水平/垂直滚动条，您可以在面板体内添加两个额外的div，如

<div class="panel-body">
   <div class="t1">
         <div class="t2"> your content goes here.....</div>
  </div>

并改变一些css，如

.panel-body {
        height:830px; width: 600px;
        overflow: hidden;
        transform: rotate(90deg);
        transform-origin: 188px 241px 0;
    }
       .t1 {
            max-height: 390px;
            overflow: scroll;
        }
        .t2 {
            height: 320px;
            width: 720px;
        }

你会得到一个简单的窗口滚动，你也可以使用插件 MalihuFancyscroll用于看上去很棒的滚动条。

Answer 2

以下是您的解决方案的JSFiddle / FullScreen JSFiddle。

我使用CSS规则overflow:hidden将正确的滚动条添加到包含<div id="collapseOne>的{{1}}。

我首先检查了HTML控制台，以检查哪个类已添加到<div class="panel-body">。所以我确定了2个正在为手风琴的 open 和 close 状态切换的课程：

<div id="collapseOne">（州：已关闭）
panel-collapse collapse（州：已开放）

我在panel-collapse collapse in类中添加了规则.collapse.in，如果内容超出初始宽度值，浏览器会添加x和y滚动条。

我希望您了解此规则的用法，此解决方案符合您的需求。

如何在手风琴中添加容器内的滚动条？

2 个答案: