javascript - 自动滚动元素列表

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>