时间戳

首页 > 解决方案 > 自动滚动项目列表

javascript - 自动滚动项目列表

问题描述

我在 a 中有一个项目列表，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>

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

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

有什么帮助吗？

标签： javascriptjqueryhtmlcssloops

解决方案

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>
这是您想要的更新。干杯！！

推荐阅读