原生JS实现横向无缝滚动

431 阅读1分钟
  <div class="wrapper" id='wrapper'>
    <p id='marqueeContent'>这是一段要滚动的文字</p>
  </div>
  function move () {
    let wrapper = document.getElementById('wrapper');
    let wrapperWidth = wrapper.getBoundingClientRect().width;

    let marqueeContent = document.getElementById('marqueeContent');
    let marqueeContentWidth = marqueeContent.getBoundingClientRect().width;

    let distance = 20; // 文字起始位置

    setInterval(() => {
      //当文字移动超出wrapper的左侧时 则归位
      if (marqueeContent.getBoundingClientRect().x + marqueeContentWidth 
      < wrapper.getBoundingClientRect().x) {
        distance = wrapperWidth;
      }
      distance--;
      marqueeContent.style.transform = 'translateX(' + distance + 'px)';
    }, 20);
  }
  move()