JQuery slimScroll always start from the bottom

Question

I have a container that already has slimscroll, and a button to add a new item to the last item. I want scrollBar 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/

Answer 1

I solved the problem, it seems I just need to add this code from the bottom every time I add a new element. Hooray! thank you @gulty

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

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

Answer 2

That was enough for me:

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

Thanks meetmahpuppy!

Answer 3

Agreed with Admir, according to the slimscroll documentation start , defined as

start - top or bottom or $ (selector) - defines the initial position of the scroll bar. When it is set to the bottom, it automatically scrolls down the scrollable container.

This will only work when initializing Slimscroll. If you want to adjust the Slimscroll position after initialization, you can use the scrollTo option.

 var container = $(selector); container.slimScroll({ scrollTo: container[0].scrollHeight }); 

Each time you change the position of Slimscroll, the scroll bar will be displayed for a while and then disappear, which will obviously make it distracting. You can use this alternative for this.

 var container = $(selector); container.scrollTop(container[0].scrollHeight);