如何在具有给定宽度的小部件中移动文本

<div id="widget" style="width: 200px; height: 50px; overflow: hidden;">
  <div id="text" style="position: relative; left: 0;">这是一段需要滚动的文本。</div>
</div>

<script>
  var widget = document.getElementById('widget');
  var text = document.getElementById('text');
  var position = 0;

  setInterval(function() {
    position -= 1;
    text.style.left = position + 'px';

    if (position < -text.offsetWidth) {
      position = widget.offsetWidth;
    }
  }, 10);
</script>