changing slimscroll position

1.7k Views Asked by At

Is there a way to move scrollbar position on initialisation when using slimscroll? I found it's possible to do this using jQuery on native scrollbar with "scrollTop", but don't see how would I be able to do it using slimscroll. Here is a fiddle. http://jsfiddle.net/c8d3ohue/

Basically I want the first div to be scrolled down on init, like in this picture.

end-result

My code:

<div class="slimScroll" style="overflow-y:auto;height:200px;width:250px">
    <div class="child-height-1" style="height:50%;overflow:hidden;position:relative">
        <div class="child-content" style="height:300px;background-color:lightgreen">asd</div>
    </div>
    <div class="child-height-2" style="height:50%;overflow:hidden;position:relative">
        <div class="child-content" style="height:300px;background-color:lightyellow">asd</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js"></script>
<script>
    $(function () {
        new slimScroll($('.child-height-1')[0]);
        new slimScroll($('.child-height-2')[0]);
    });
</script>
1

There are 1 best solutions below

2
On BEST ANSWER

If you use jquery.slimscroll.min.js instead of slimscroll.min.js, you can do this like this.

For your same HTML above, in the document ready you can do like this,

var itemContainer1 = $(".child-height-1");
itemContainer1.slimScroll({
    height: '200px',
    start: 'bottom',
    alwaysVisible: true
}); 

var itemContainer2 = $(".child-height-2");
itemContainer2.slimScroll({
    height: '200px',
    start: 'top',
    alwaysVisible: true
}); 

See a fiddle,

http://jsfiddle.net/anjanasilva/uypabr6o/

How it looks,

enter image description here

Hope this helps.