div自动滑动淡入/淡出或缓和以获得更好的跨膜效果

Question

我有一个div，它会自动向下滑动并循环回到顶部。但是，从底部到顶部的过渡非常严格，需要某种程度的缓解或淡入淡出或可能延迟。

我尝试使用淡入淡出，但无法使其正常淡入淡出。

这是JsFiddle：https://jsfiddle.net/pw08cy6g/4/

var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond / 60); // Animate at 60 fps.
var wrapper = document.getElementById('ph0');
autoScroll(wrapper);


function autoScroll(element) {
  if (element.scrollTop < element.scrollHeight) {
    window.requestAnimationFrame(autoScroll.bind(null, element));
    
    if( element.scrollTop === (element.scrollHeight - element.offsetHeight)){
     element.scrollTop = 0
   $("#ph0").stop().fadeOut();
  }else{
    
    element.scrollTop += scrollDistancePerAnimationFrame;
    }
  }
}