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 () {

  $("#divId").endlessScroll({ 
      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 Codicode.com
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
SPACE BETWEEN IMAGES
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
Leave a Comment:
Name :
Email : * will not be shown
Title :
Comment :