jQuery auto scroll vertically in a div

Question

Can anyone suggest a good simple jQuery vertical autoscroller script? one that's not bloat, I just need for it to auto start and scroll 6 or more liin a div. i tried the jquery.autoscroll.js but couldn't get it to auto start.

$.fn.autoscroll.defaults = { 
   start: { 
      step: 50, 
      scroll: true, 
      direction: "down", 
      pauseOnHover: true 
   }, 
   delay: 5000, 
   ffrw: { 
      speed: "fast", 
      step: 100 
   } 
};

Robin Maben · Answer 1 · 2014-04-22T03:27:04.590

17

var div = $('div.autoscrolling');
var scroller = setInterval(function(){
    var pos = div.scrollTop();
    div.scrollTop(++pos);
}, 100)

Working Demo.

EDIT:

To stop scrolling when the div has scrolled to the bottom add the following check at the end of the above function() {} -

if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight)
   clearInterval(scroller);
}

edited Apr 22 '14 at 03:27

answered Aug 28 '12 at 17:18

Robin Maben

22,194
16
64
99

2

and when hits the end, it will try to scroll and scroll and scroll and scroll – Flash Thunder Aug 29 '13 at 01:16
3

@FlashThunder: There are many answers already available on SO to check that. Check if `scrollTop` has reached the container height and use `clearInterval`. Big deal. How does that warrant a down vote? Suggest a solution and not just the problem. Go do some searching first. – Robin Maben Aug 29 '13 at 05:59

score 3 · Answer 2 · answered Dec 20 '12 at 10:26

3

simplyScroll is a cool plugin http://logicbox.net/jquery/simplyscroll/

answered Dec 20 '12 at 10:26

Nerdroid

13,398
5
58
69

score 1 · Answer 3 · edited May 23 '17 at 12:26

Robin's answer didn't quite do the trick for me, for several reasons, so here's a modified and extended version of his approach:

var div = $('.scrollbit');

$('.scrollbit').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
    if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {

    }
    if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) { 
        clearInterval(scrollbit);
    }
    if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) { 
        clearInterval(scrollbit);
    }
});

var scrollbit = setInterval(function(){
    var pos = div.scrollTop();
    if ((div.scrollTop() + div.innerHeight()) >= div[0].scrollHeight) {
        clearInterval(scrollbit);
    }
    div.scrollTop(pos + 1);
}, 100);

with help from anonymous user1248475 here:

Detect whether scroll event was created by user

and this answer:

https://stackoverflow.com/a/9392134

Hope that's helpful for anyone looking to solve the issue of how to auto scroll a div with jquery and stop when user scrolls manually.