CODEWITHSUNDEEP
javascriptjqueryhtmlscrollscrolltop
user9951515
user9951515

Reputation: 305

scrollTop to the full height of a div

The following code automatically scrolls to the bottom of the div and then back up across the time span of 5 seconds and then loops.

The problem I am having with it is that it does not recognize the scrollable/overflowing height of the div, just what I have set the standard height to. As it scrolls down it jumps to the bottom, while on the way up it slowly scrolls.

How do I alter the code so that it scrolls down as smoothly as it does up?

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>

Upvotes: 1

Views: 1257

Answers (1)

Slaawwa
Slaawwa

Reputation: 184

This is solution:

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

Upvotes: 1

Related Questions