问题描述
我正在使用手风琴。 在这里，手风琴功能正在运行。 我想在正文内容中插入垂直和水平滚动条。 如何在面板主体内容内添加滚动条。 我已经包括了小提琴和代码。
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; }
<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>
在这个小提琴中，我想将滚动条插入body-content内。 请帮我怎么做。
1楼
vivekkupadhyay
2
已采纳
2015-07-30 11:39:03
对于面板体内的简单水平/垂直滚动条，您可以在面板体内添加两个额外的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;
}
您将获得一个简单的窗口滚动，还可以使用插件来制作精美的滚动条。
2楼
Anwar
0
2015-07-30 11:04:43
这是您的解决方案的 / 。
我使用CSS规则overflow:hidden将正确的滚动条添加到包裹<div class="panel-body">的<div id="collapseOne>中。
我首先检查HTML控制台，以检查哪个类已添加到<div id="collapseOne"> 。
因此，我确定了两个正在切换您的手风琴的打开和关闭状态的类：
-
panel-collapse collapse（状态：已关闭） -
panel-collapse collapse in状态（状态：打开）
我在.collapse.in类中添加了规则overflow : auto ，如果内容超出了初始宽度值，则浏览器可以添加x和y滚动条。
我希望您了解此规则的用法，并且此解决方案适合您的需求。