Autoscrolling list of items

Question

I have a list of items in a div and the outer div have a fixed height. So the items are overflowed but hidden inside the outer div. I want to scroll the outer div until the last item in the list is visible. I am half way there. I scrolled the outer div until the last list item.

This is what I have done so far:

$(document).ready(function() {

  $m = $('.marq');
  $q = $('.qbox');
  var mh = $m.height();
  var qh = $q.height();
  var currscr = 0;
  scroll();

  function scroll() {

    var xpx = mh - qh;
    if (mh > qh) {
      currscr = xpx;
      setInterval(function() {
        autoscroll();
      }, 50);

    } else {
      console.log("too few items");
    }
  }

  function autoscroll() {

    if (currscr > 0) {
      var ch = $m.css('top').replace('px', '');
      $m.css('top', (ch - 1) + 'px');
      --currscr;
    }

  }



});

.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}



  

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15

It stops on reaching the last item. I want it to scroll back to the first item after some delay. Then scroll to bottom after some delay. And repeat this infinitely.

NOTE: The speed should be consistent and the number of items in the list should not affect the speed of scroll. This is applicable to both scroll, top to bottom and bottom to top. The scroll animation should be more linear-like.

Any help?

ReSedano · Accepted Answer

You were almost at the end!

I created 3 variables:

var interval; /* this is to put your setInterval */
var waitingTimeBottom = 2000; /* This is waiting time when you arrive at the bottom */
var waitingTimeTop =5000 /* This is waiting time on top */

Then put your setInterval in that variable on scroll() function:

interval=setInterval(function() {
    autoscroll();
}, 50);

After that I worked only in the end of autoscroll() function adding the 2 delay that you requested:

else {
    clearInterval(interval);
    $m.delay(waitingTimeBottom).animate({'top': '0px'}, 2000, function() {
        setTimeout(function()  {
            scroll();
        }, waitingTimeTop);
    });
}

This is all code in action:

$(document).ready(function() {

    $m = $('.marq');
    $q = $('.qbox');
    var mh = $m.height();
    var qh = $q.height();
    var currscr = 0;

    var interval;
    var waitingTimeBottom = 2000;
    var waitingTimeTop = 5000

    scroll();

    function scroll() {

        var xpx = mh - qh;
        if (mh > qh) {
            currscr = xpx;

            interval = setInterval(function() {
                autoscroll();
            }, 50);

        } else {
            console.log("too few items");
        }
    }

    function autoscroll() {

        if (currscr > 0) {
            var ch = $m.css('top').replace('px', '');
            $m.css('top', (ch - 1) + 'px');
            --currscr;
        } else {
            clearInterval(interval);
            $m.delay(waitingTimeBottom).animate({
                'top': '0px'
            }, 2000, function() {
                setTimeout(function() {
                    scroll();
                }, waitingTimeTop);
            });
        }
    }

});

.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}



  

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15

Edit 1

I changed a little your JavaScript using 2 more simple animations with a linear speed:

$(document).ready(function () {

	$m = $('.marq');
	$q = $('.qbox');
	var mh = $m.height();
	var qh = $q.height();

	var xpx = mh - qh;

	var waitingTimeBottom = 2000;
	var waitingTimeTop = 5000;
	var animationTime = xpx * 20; /* Here you can change the speed: if you use "xpx" variable, it never changes according to the number of items => change only the duration, not the speed. */

	function scroll() {
		$m.animate({'top': -xpx + "px"}, animationTime, "linear", function () {
			$m.delay(waitingTimeBottom).animate({'top': '0px'}, animationTime, "linear", function () {
				setTimeout(function () {
					scroll();
				}, waitingTimeTop);
			});
		});
	}


	if (mh > qh) {
		scroll();
	} else {
		console.log("too few items");
	}

});

.qbox {
  height: 90vh;
  width: 80vw;
  box-sizing: border-box;
  overflow: hidden;
}

.marq {
  position: relative;
  box-sizing: border-box;
}

.item {
  background: #4CAF50;
  color: white;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 8px;
}



  

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15

Autoscrolling list of items

Answers (2)

Edit 1

Related Questions