如何使垂直文本滚动停止在每一行

<div class="scroll-container">
  <div class="scroll-content">
    <p>第一行文本</p>
    <p>第二行文本</p>
    <p>第三行文本</p>
    <p>第四行文本</p>
    <p>第五行文本</p>
  </div>
</div>

.scroll-container {
  height: 100px; /* 容器高度 */
  overflow: hidden;
}

.scroll-content {
  position: relative;
}

.scroll-content p {
  margin: 0;
  line-height: 20px; /* 每行的高度 */
}

var container = document.querySelector('.scroll-container');
var content = document.querySelector('.scroll-content');
var lineHeight = parseInt(getComputedStyle(content.querySelector('p')).lineHeight);
var lineCount = Math.floor(container.clientHeight / lineHeight);
var scrollHeight = lineHeight * lineCount;
var currentPosition = 0;

function scrollText() {
  currentPosition -= 1; // 滚动速度，可根据需要调整
  content.style.top = currentPosition + 'px';

  if (Math.abs(currentPosition) >= scrollHeight) {
    currentPosition = 0;
    content.style.top = currentPosition + 'px';
  }
}

setInterval(scrollText, 50); // 滚动间隔，可根据需要调整