JQuery Slimscroll 问题

Question

      $(document).ready(function(e){ 
$('#boxL').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});

    $(document).ready(function(e){ 
$('#boxC').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});



    $(document).ready(function(e){ 
$('#boxR').slimscroll({
    color: '#212121',
    position:'right',
     distance : '0px',
    size: '10px',
    height: '800px',
    width:'200px',
    alwaysVisible: true
});
});

* {
  box-sizing:border-box;  
}

.bloqueL {
  border:1px solid #000;
  padding:10px;
display:inline-block;

}
.bloqueC {
  border:1px solid #000;
  padding:10px;
display:inline-block;


}
.bloqueR {
  position:absolute;
  top:0px;
  right:0px;
  border:1px solid #000;
  padding:10px;
display:inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://madeindreams.ca/JS/jquery.slimscroll.min.js"></script>

<body>
  <div id="boxL" class="bloqueL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
  </div>
  
  <div id="boxC" class="bloqueC" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
      </div>
  
    <div id="boxR" class="bloqueR" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
      </div>
</body>

我已经找到 Slimscroll 并试过了。在他们展示工作演示的网站上，滚动条附在容器上。但是当我尝试的时候。滚动条一直在右边。

我有 3 个容器，最终在页面上

我希望我的 3 个容器在同一条线上对齐。但是因为slimscroll，他们是一个接一个的。

即使我将位置设置为绝对位置也不起作用。

Answer 1

问题出在height: '100%',选项中。仅当元素的父元素具有 height 样式时才可以设置此项。在这种情况下，元素的父元素是 body 并且 body 没有 height.

您有 2 种方法可以解决此问题：

设置 body 高度。
将选项从 100% 更改为您想要的任何选项，如 100px 如下例所示：（另外，删除不必要的 css 代码。插件会处理它。 )

$(document).ready(function(e) { 
  $('.bloqueL').slimscroll({
    color: '#212121',
    size: '10px',
    height: '100px',
    alwaysVisible: true
  });
});

/*.bloqueL{
position: absolute;
left: 0px;
top: 0px;
height:100px;
width: 420px;
min-height: 10px;
border:1px solid #000000;
overflow-x: hidden;  
overflow-y: hidden; 
}*/

* {
  box-sizing:border-box;  
}

.bloqueL {
  border:1px solid #000;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://madeindreams.ca/JS/jquery.slimscroll.min.js"></script>

<body>
  <div id="boxL" class="bloqueL" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
    x<br>
  </div>
</body>

JQuery Slimscroll 问题

JQuery Slimscroll issue

javascript

jquery

slimscroll