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/

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. — gulty, Apr 16 '14 at 16:39
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. — meetmahpuppy, Apr 17 '14 at 07:08
Have you checked this: http://stackoverflow.com/questions/12441619/scroll-top-with-slimscroll-plugin ? there is also a scrollbottom code snippet — gulty, Apr 17 '14 at 07:58
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? — meetmahpuppy, Apr 18 '14 at 07:06

score 17 · Answer 1 · edited Dec 25 '16 at 11:24

17

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/

edited Dec 25 '16 at 11:24

Sasikanth

3,045
1
22
45

answered Apr 20 '14 at 04:49

meetmahpuppy

418
1
4
17

score 6 · Answer 2 · answered Feb 13 '15 at 15:46

6

This was enough for me:

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

Thanks meetmahpuppy!

answered Feb 13 '15 at 15:46

Admir Heric

117
1
3

score 5 · Answer 3 · answered Jul 25 '16 at 16:14

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

jQuery slimScroll to always start at the bottom

3 Answers3