javascript - scrollTop 到 div 的全高

Question

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

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

如何更改代码，使其向下滚动和向上滚动一样顺畅？

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);

.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; 
}

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

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