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

Question

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

我的div中有一个滚动条，但我希望右侧有一个滚动条，位于＆＃34;面板2和＃34; 。

无法使用CSS样式 位置：已修复 和 margin-right 。还有另一种方式（jQuery）吗？

我想要这个：

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

Answer 1

您需要为内容添加包装，并为内容 div 设置宽度。

HTML CODE：

 <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 */ 

    } 

检查演示： https://jsbin.com/niyetopaxo/1/edit?output

Answer 2

看看这是否是你要找的：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;