$(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>
I have found Slimscroll and tried it. On the site where they show a working demo the scroll bar is attached to the container. But when I try it. the scroll bar is all the way to the right.
I have 3 containers and eventually on the page
I would like my 3 containers to be aligned on the same line. But because of slimscroll they are one after each other.
Even if I set the position to absolute it is not working.