在没有jQuery的情况下慢速滚动切换？

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
<button onclick="scrollToNext()">Next</button>

#container {
  height: 200px;
  overflow: hidden;
}

.item {
  height: 200px;
  width: 100%;
  display: none;
}

.active {
  display: block;
}

var items = document.getElementsByClassName('item');
var currentIndex = 0;

function scrollToNext() {
  items[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % items.length;
  items[currentIndex].classList.add('active');
  smoothScrollTo(items[currentIndex]);
}

function smoothScrollTo(element) {
  var targetPosition = element.offsetTop;
  var currentPosition = window.pageYOffset;
  var distance = targetPosition - currentPosition;
  var duration = 1000; // 滚动持续时间，单位为毫秒
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var elapsedTime = currentTime - startTime;
    var position = ease(elapsedTime, currentPosition, distance, duration);
    window.scrollTo(0, position);
    if (elapsedTime < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    // 缓动函数，这里使用简单的线性缓动
    return c * t / d + b;
  }

  requestAnimationFrame(animation);
}