Ufdjrw

Piggybacking off this question and excellent answer I have something that needs more work. I have a similar scrolling need, but with child divs and not list elements, and importantly the divs contain images that are all the same width but variable height. Using the animate/scrolltop I cannot get smooth scrolling.

Essentially, I want behavior like in this codepen but with variable height, like in this codepen (which isn't working), because the height of the child element doesn't allow the animate scrollTop to accurately compute:

setInterval(function()
 var first_height = $('#list').find('div:first').height(); $('#list').stop().animate(scrollTop:first_height,2650,'linear',function()
 $(this).scrollTop(0).find('div:last').after($('div:first', this));
 );
, 2700);

Can anyone offer any tips?

EDIT: almost there with this pen based on the answer below. I get "snapping to grid" functionality instead of smooth scrolling.

It is because you have set a fixed height in your CSS but you didn't include the paddings and margins measurement into your total height of the div you want to set scrollTop animation.

In order to achieve precise measurement of every elements in the container, we need to get the actual paddings and margins of the element using jQuery.css().

TAKE NOTE

CSS shorthand properties are not supported by the jQuery.css() function. So we need to define everything in the traditional way (LMAO).

Use of parseInt() is necessary as the results of jQuery functions are returned as characters/string, making it concatenate the two results instead of adding them.

Example: parseInt($('#list').find('div:first').css('padding-top')) + parseInt($('#list').find('div:first').css('padding-bottom'));

will result in [10 + 10 = 20]

and $('#list').find('div:first').css('padding-top') + $('#list').find('div:first').css('padding-bottom');

will result in ['10' + '10' = '1010']

var interval = 1000;
setInterval(function() 
var first_height = $('#list').find('div:first').height();
var paddings = parseInt($('#list').find('div:first').css('padding-top')) + parseInt($('#list').find('div:first').css('padding-bottom'));
var margins = parseInt($('#list').find('div:first').css('margin-top')) + parseInt($('#list').find('div:first').css('margin-bottom'));
var animation = interval - paddings - margins;
 $('#list').stop().animate(
 scrollTop: first_height + paddings + margins
 , animation, 'linear', function() 
 $(this).scrollTop(0).find('div:last').after($('div:first', this));
 );
, interval);

* 
 box-sizing: border-box;


#list 
 overflow: hidden;
 width: 300px;
 height: 250px;
 background: red;
 padding: 10px;


#list div 
 display: block;
 padding: 10px 10px;
 margin-bottom: 10px;
 background: yellow;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
 <div style="height: 30px;">Item 1</div>
 <div style="height: 50px;">Item 2</div>
 <div style="height: 30px;">Item 3</div>
 <div style="height: 50px;">Item 4</div>
 <div style="height: 30px;">Item 5</div>
 <div style="height: 50px;">Item 6</div>
 <div style="height: 30px;">Item 7</div>
 <div style="height: 50px;">Item 8</div>
 <div style="height: 30px;">Item 9</div>
 <div style="height: 50px;">Item 10</div>
</div>

Source: jQuery API | .css(), jQuery API | .animate()