Как добавить полосу прокрутки внутри контейнера в аккордеоне?

Question

Я использую аккордеон. Здесь функциональность Аккордеона работает. Я хочу вставить вертикальную и горизонтальную полосу прокрутки в содержимое тела. Как добавить полосу прокрутки внутри содержимого панели. Я включил скрипку и код.

FIDDLE

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>

В этой скрипкой я хочу, чтобы вставить скроллбар внутри тела-контента. Пожалуйста, помогите мне, как я могу это сделать.

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>, которая обертывает <div class="panel-body">.

Сначала я проверил для консоли HTML, чтобы проверить, какой класс был добавлен в <div id="collapseOne">. Так что я identifyied 2-го класса, который был переключаясь для открытой и близко состояние вашего аккордеона:

• panel-collapse collapse (состояние: закрытое)
• panel-collapse collapse in (состояние: открытый)

I добавлено к классу .collapse.in правило overflow : auto, которое позволяет браузеру добавлять строки прокрутки x и y, если содержимое выходит из значения начальной ширины.

Надеюсь, вы поняли использование этого правила, и это решение соответствует вашим потребностям.