Category : Javascript | Author : Chtiwi Malek | First posted : 12/23/2012 | Updated : 8/18/2014
Tags : jquery, jquery plugins, effects, smooth, transitions, scrolling, plugins, endless
Endless Div Scroll jQuery Plugin

Endless Div Scroll jQuery Plugin

This simple, but useful jquery plugin will apply a smooth endless/infinite scrolling effect to any div content, including texts, links, pictures, divs, anchors ... it consists of one lightweight javascript file (~1kb).

You can set up multiple scroll areas, it can be easily controlled via multiple parameters like scrolling direction, steps, speed and also you can apply a pause on mouse over. Also the width and height can be fixed or fluid (percentage).

Check out the demo page to see the Endless Div Scroll jQuery Plugin in action :

Usage :

It's easy to use this plugin, just add theses javascript lines to activate the scroll animation for one or many divs on your page/website :
$(window).load(function () {

      width: '90px', 
      height: '10px', 
      steps: -2, 
      speed: 40, 
      mousestop: true 

  // Recopy the previous line to add scrolling to other divs.


Parameters :

  width : Desired div's width.
  height : Desired div's height.
  steps : pixel step for the scrolling, also controls the direction, a negatif value (left), a positive value (right).
  speed : animation speed, from 0 (quicker) to infinite (slower).
  mousestop : if set to true the scrolling stops when the mouse is over the div.
About the author :
Malek Chtiwi is the man behind
34 years old full stack developer.
Loves technology; but also likes design, photography and composing music.
Comments & Opinions :
Chrome issue at < 100% page width
Many thanks for the great scroller. I found that Chrome assigns the wrong width to the the el1 and el2 containers, it sets them to 100% of the containing element and not the full width of the contained elements.

To fix this I modified line 34 of the non-minified code to read:

  var act_width = 0;
        $(e1).find('img').each(function() {
          act_width += $(this).width();
        e1.css({ "position": "absolute", "width": act_width+"px" }).clone().attr('id', elemId + "2").insertAfter(e1);

Many thanks!
- by Andy on 11/6/2013
width issues
Expanding on the previous comment a little bit. I had a problem in where the two generated slides overlapped after only a few elements, and did not slide through all elements before disappearing. The js code did not compute the width of the entire scroll properly (note that it was a fairly hefty scrollbar, ~6600px wide, and the original code measured only one third of that). So using the above snippet as a base, I modified it to: var act_width = 0; $(e1).children().each(function() { act_width += $(this).outerWidth(); }); e1.css({ "position": "absolute", "width": act_width+"px" }).clone().attr('id', elemId + "2").insertAfter(e1); Now the proper width is measured and the scrollbar no longer overlaps itself.
- by zyrobs on 2/13/2014
Where exactly are you placing this snippet? Are you completely replacing just line 34? or adding it without replacing anything else? 

this is my line 31-35:

elem.wrapInner("<div id='" + elemId + "1' />");
        var e1 = $('#' + elemId + "1");
        e1.css({ "position": "absolute" }).clone().attr('id', elemId + "2").insertAfter(e1);
        var e2 = $('#' + elemId + "2");
        Repos(e1, e2, options.steps > 0);
- by cp on 2/4/2015
comment form issue
And on another note, the smart editor of the comment form does not submit messages at all, keeps returning "please type in your comment" errors. I had to submit the above before the editor loaded for it to pass, which of course mangled up the linebreaks.
- by zyrobs on 2/13/2014
Thanks! its working!
- by Sher on 5/31/2016
Memory leak?
Very nice piece of software, however I think there might be a memory leak. I'm using the endless scroll on a div in which I show live data obtained from a web service. On the $.ajax() success callback function, the live data is updated, i.e. the html content of the scrolling div gets replaced, and endlessScroll() is called again. The latter is necessary, otherwise the scrolling stops. Div contents get updated every 20 seconds. I have noticed that, within few minutes, the browser becomes less and less responsive. Using Chrome's memory profiler, I can see that the used memory keeps increasing, with a typical sawtooth shape, growing from an initial ~5MB to ~45MB in around ten minutes. I believe this is due to the fact that I endlessScroll() is invoked at every content refresh. Any suggestion on how to fix this issue? Thanks a lot!
- by Valerio on 4/23/2014
if there is only one image than i don't want to scroll it across the it possible with this plugin?
- by dollar on 8/29/2014
Hi thank's for this very nice plugin!
I would like to supress the space between images. I wonder if this is possible and how... I've tried a bit but i haven't succeded. I would like the help!
- by thais on 11/5/2014
- by test on 12/4/2014
I am getting endlessScroll is not a function error
Hi, I downloaded the plugin and added to my project. I used exactly the same code snippet.
$(window).load(function () {

      width: '90px', 
      height: '10px', 
      steps: -2, 
      speed: 40, 
      mousestop: true 

  // Recopy the previous line to add scrolling to other divs.


I am getting endlessSCroll is not a function erro. Please help!
- by Test on 1/15/2015
funky behavior in chrome
Hey all!
This marquee is great, it's exactly what I wanted and is super lightweight. I'm getting precisely the functionality I want in FireFox, but in Chrome the behavior is a bit funky. I tried the modded code but end up breaking it. Where exactly are you placing your modded coded and are you replacing any part? Line 34 in my js reads: var e2 = $('#' + elemId + "2");

I'm using it in WordPress.

Any ideas or help?

You can check out my usage at Look in both FF and Chrome to see what I mean...

Thanks !
- by cp on 2/4/2015
next previous button
Is it possible to implement next prev button in this??
- by syms on 5/7/2015
not moving
hey. my bar is stagnant and it is not moving can someone help me out
- by Anay Tripathi on 11/25/2015
- by hello on 2/4/2018
valentine day whatsapp video download
Hi friends if you are searching romantic video then click here <a href="">valentine day whatsapp video download</a> free also share with your friends thank you 
- by adv ydv on 1/21/2020
great post
I really like this brilliant blog thanks for sharing this amazing blog with us keep it up.   
- by apurvabajaj on 9/17/2020
Best escorts agency in Lucknow
<a href="">Hazratganj Escorts</a>
- by Taniya Khan on 10/8/2020
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :