CODEWITHSUNDEEP
javascriptjqueryhtmlcssslimscroll
meetmahpuppy
meetmahpuppy

Reputation: 428

jQuery slimScroll to always start at the bottom

I have a container that have already a slimscroll, and a button to add new item to the last element. I want the scrollBar of slimscroll to always start at the bottom. Any help please? :(

<div>
  <ul id="item-container">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>

<input type="text" placeholder="add another item" id="add-input"/>
<button id="add-btn">Add</button>

Need help badly :(

http://jsfiddle.net/qh8ye/1/

Upvotes: 9

Views: 18866

Answers (3)

meetmahpuppy
meetmahpuppy

Reputation: 428

I solved the problem, it seems I just have to add this code in the bottom every time I add the new item. Cheers! thanks! @gulty

var scrollTo_int = itemContainer.prop('scrollHeight') + 'px';
    itemContainer.slimScroll({
    scrollTo : scrollTo_int,
    height: '200px',
    start: 'bottom',
    alwaysVisible: true
});

http://jsfiddle.net/qh8ye/3/

Upvotes: 17

Adeel Ilyas
Adeel Ilyas

Reputation: 487

Agreed with Admir, as per slimscroll documentation start option defined as

start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container.

This will work only at Slimscroll initialization. If you want to adjust Slimscroll position after initialization then you can use scrollTo option.

var container = $(selector);

container.slimScroll({
  scrollTo: container[0].scrollHeight
});

Every time you change Slimscroll position, it will show scroll bar for a while and then fade it out which will obviously make it distracting. For this, you can use this alternative 

var container = $(selector);

container.scrollTop(container[0].scrollHeight);

Upvotes: 5

Admir Heric
Admir Heric

Reputation: 117

This was enough for me:

$('#messagelist').slimScroll({
        start: 'bottom'
});

Thanks meetmahpuppy!

Upvotes: 6

Related Questions