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个容器在同一条线上对齐。但是由于它们很细，它们是一个接一个的。

即使我将位置设置为绝对位置也无法正常工作。

Answer 1

问题出在height: '100%',选项中。只有元素的父级具有height样式时，才能设置此项。在这种情况下，元素的父级是body，而body没有height。

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

设置body高度。

将选项从100%更改为您想要的100px，如下例所示:(另外，删除不必要的css代码。插件会照顾它。）< / LI>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery Slimscroll问题

1 个答案: