scrollTop 到 div 的全高答案

【问题标题】：scrollTop to the full height of a divscrollTop 到 div 的全高
【发布时间】：2018-06-16 22:48:36
【问题描述】：

以下代码会自动滚动到 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>

【问题讨论】：

"如何更改代码，使其向下滚动和向上滚动一样平滑？"就我而言，它在上下路上都很顺利o.O
@user3210641 是的，但请注意它向下滚动的速度是向上滚动的 4 倍，这不应该发生！
也许我疯了，但它们看起来差不多。
我明白你在说什么，对 cmets 的人来说，看看较小的列，列 2 和 4 移动的速度有多快，它们比 1 和 3 早得多地触底，但是他们都同时达到顶峰。这意味着他们必须在下降而不是上升时快速移动。

标签： javascript jquery html scroll scrolltop

【解决方案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

【讨论】：