如何移動（或切換）垂直滾動條

Question

如何移動（或切換）垂直滾動條？

我在我的div中有一個滾動條，但我想在右側「面板2」旁邊有一個滾動條。

CSS樣式位置：固定和保證金右不能使用。有沒有另一種方法（jQuery）？

我想這一點：

JSBIN：https://jsbin.com/pahezuzohi/1/edit?html,css,output

Answer 1

您需要添加包裝內容和設置內容DIV寬度。

HTML代碼：

<div class="wrapper"> 
    <div class='left bar'>Panel 1</div> 
    <div class='left menu'> Menu 1</div> 
     <div class='content'> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Phasellus et lorem id felis nonummy placerat. Mauris elementum mauris vitae tortor. Integer lacinia. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce aliquam vestibulum ipsum. Praesent dapibus. Fusce suscipit libero eget elit. Fusce aliquam vestibulum ipsum. Suspendisse sagittis ultrices augue. Etiam quis quam. Nunc auctor. Nulla est. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nullam sit amet magna in magna gravida vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     </div> 
    <div class='right bar'>Panel 2</div> 
    <div class='right menu'>Menu 2 </div> 
    </div> 

CSS代碼：

.main { 
     overflow-y: scroll; /* add "overflow-y: scroll" here */ 
    } 
    .menu{ 
     background: lightgreen; 
     height: 100%; 
     width: 20%; 
    } 

    .bar{ 
     background: lightblue; 
     float: right; 
     height: 100%; 
     width: 10%; 
    } 

    .left{ 
     float: left; 
    } 

    .right{ 
     float: right; 
    } 

    .content{ 
     position: relative; 
     width: 40%; /* set the width */ 
     height: 100%; 
     float: left /* set the float */ 

    } 

檢查DEMO： https://jsbin.com/niyetopaxo/1/edit?output

Answer 2

看看這是你在找什麼：

.content { 
 
    height: 190px; 
 
    width: 600px; 
 
    position: relative; 
 
    padding-right: 15px; 
 
} 
 

 
#scrollable { 
 
    background: white; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y: scroll; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#text { 
 
    margin: 0px 210px; 
 
} 
 

 
.panel1, 
 
.panel2 { 
 
    background: #ADD8E6; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.menu1, 
 
.menu2 { 
 
    background: #90EE90; 
 
    width: 100px; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
.menu1, 
 
.panel1 { 
 
    float: left; 
 
} 
 

 
.menu2, 
 
.panel2 { 
 
    float: right; 
 
}

<div class="content"> 
 

 
    <div id="scrollable"> 
 
    <div id="text"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Phasellus et lorem id felis nonummy placerat. Mauris elementum mauris vitae tortor. Integer lacinia. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce aliquam vestibulum ipsum. Praesent dapibus. Fusce suscipit libero eget elit. Fusce aliquam vestibulum ipsum. Suspendisse sagittis ultrices augue. Etiam quis quam. Nunc auctor. Nulla est. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Nullam sit amet magna in magna gravida vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Phasellus et lorem id felis nonummy placerat. Mauris elementum mauris vitae tortor. Integer lacinia. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce aliquam vestibulum ipsum. Praesent dapibus. Fusce suscipit libero eget elit. Fusce aliquam vestibulum ipsum. Suspendisse sagittis ultrices augue. Etiam quis quam. Nunc auctor. Nulla est. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. 
 
    </div> 
 
    </div> 
 

 
    <div class="panel1"> 
 
    Panel 1 
 
    </div> 
 
    <div class="menu1"> 
 
    Menu 1 
 
    </div> 
 

 
    <div class="panel2"> 
 
    Panel 2 
 
    </div> 
 

 
    <div class="menu2"> 
 
    Menu 2 
 
    </div> 
 
</div>