jQuery slimScroll to always start at the bottom

Question

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/

Olympium

can you create a fiddle or at least show us your JS? according to the documentation there is a: start: bottom, option where you could also pass an element as a starting position. – Misreport

Hello, the container has already the start: bottom, I want is every time an item is added to the list, the scroll should always view the bottom. – Olympium

Have you checked this: #12442119 ? there is also a scrollbottom code snippet – Misreport

Hi, thank you for the reply. I want actually to trigger the scrollbar in the slimscroll to the bottom, as you can see on the markup above, the list will tend to go long, the first time you initiate the scrollbar, it will always start at the bottom, then when you add now another item, I want the scrollbar to automatically view the bottom, so it's something like triggering the scrollbar right? Is this possible? – Olympium

P.S. here is the link: jsfiddle.net/qh8ye/1 – Olympium

Answer 1

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/

Olympium

Answer 2

This was enough for me:

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

Thanks meetmahpuppy!

Ledeen

Answer 3

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

Viafore