如何移动（或切换）垂直滚动条

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>