自动滚动项目列表

Question

我在div 中有一个项目列表，而外部div 有一个固定的高度。所以项目溢出但隐藏在外部div 中。我想滚动外部div，直到列表中的最后一项可见。我已经成功了一半。我滚动了外部 div 直到最后一个列表项。

---

这是我到目前为止所做的：

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

它在到达最后一项时停止。我希望它在延迟一段时间后滚动回第一项。然后在延迟一段时间后滚动到底部。并无限重复。

注意：速度要一致，列表中的项目数不应该影响滚动速度。这适用于滚动，从上到下和从下到上。滚动动画应该更像线性。

有什么帮助吗？

Answer 1

你快要结束了！

我创建了 3 个变量：

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 */

然后将你的 setInterval 放入 scroll() 函数的那个​​变量中：

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

之后，我只在 autoscroll() 函数的末尾工作，添加了您请求的 2 延迟：

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

这是所有的代码：

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

编辑 1

我用另外 2 个线性速度的简单动画对你的 JavaScript 做了一点改动：

$(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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="qbox">
  <div class="marq">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>

Answer 2

var scroller = document.getElementById('scroller');
var scroller_height = scroller.clientHeight;
var qbox_height = document.getElementById('qbox').clientHeight;

function scrollForever(p_top)
	{
	var move_distance = 1;
	var new_top = p_top - move_distance;
	scroller.style.top = ""+p_top+"px";
	if(scroller_height+(new_top-qbox_height)>=0)
		{
		setTimeout(function(){scrollForever(new_top)},50);
		}
	else
		{
		setTimeout(function(){scrollBack(new_top)},1000);
		}
	}
function scrollBack(p_top)
	{
	var move_distance=1;
	if(p_top<0)
		{
		p_top = p_top+move_distance;
		scroller.style.top = ""+p_top+"px";
		setTimeout(function(){scrollBack(p_top)},50);
		}
	else
		{
		scroller.style.top = "0px";
		setTimeout(function(){scrollForever(0)},1000);
		}
	}
scrollForever(0);

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>scrolling.html</title>
<style type="text/css">

.qbox {
  height: 175px;
  width: 500px;
  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;
}

</style>
</head>

<body>

<div class="qbox" id="qbox">
  <div class="marq" id="scroller">

    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>


  </div>
</div>
</body>

</html>

这是您想要的更新。干杯！！