scrollTop到div

Question

以下代码会自动滚动到div的底部，然后在5秒的时间跨度内备份然后循环。

我遇到的问题是它无法识别div的可滚动/溢出高度，正是我将标准高度设置为。当它向下滚动时它会跳到底部，而在向上的过程中它会慢慢滚动。

如何更改代码以使其顺利向下滚动？

＆＃13;

＆＃13;

function scroll(speed) {
		$('.name').animate({ scrollTop: $('.name').scrollTop() + $('.name').height() }, speed, function() {
			$(this).animate({ scrollTop: 0 }, speed);
		});
	}

	speed = 5000;

	scroll(speed);
	setInterval(function(){scroll(speed)}, speed * 2);

＆＃13;

.name {
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	text-orientation: upright;
	letter-spacing: -2px;
	font-family: 'digital';
	width: 16px;
	height: 87px;
	background-image: radial-gradient(circle at bottom,  rgba(245,245,245,1) 20%,rgba(100,100,100,1) 100%);
	box-sizing: border-box;
	border:solid 1px #9effff; 
	margin-left: 7px;
	margin-top: 6px;
	float: left;
	border-radius: 5px;
	overflow: auto;
}	

::-webkit-scrollbar { 
    display: none; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="name">abcdefghijkl</div>
<div class="name">abcdefg</div>
<div class="name">abcdefghijklmnopqrs</div>
<div class="name">abcdefghi</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是解决方案：

function scroll(speed) {
    $('.name').each(function() {
      let $this = $(this), 
          st = $this.prop('scrollHeight') - $this.height();
      $this.animate({
        scrollTop: st,
      }, speed, function() {
        $this.animate({ scrollTop: 0 }, speed);
      });
    })
}

Demo on CodePen