web浏览器页面实现滚屏效果-526互联

web 浏览器页面实现滚屏效果

window 对象提供了执行动画的方法 window.requestAnimationFrame()

场景：固定位置显示多项内容列表需要自动滚屏展示

demo：

  /**
   * 设置文本滚屏效果
   */
  setTextScroll(): void {
    const ulBody = documnet.querySelector('.text');
    const hei = ulBody.offsetWidth; // 内div 宽度
    const heiShow = ulBody.parentElement.offsetWidth; // 父div宽度
    let left = ulBody.style.left.replace('px', '') * 1;
    if (hei + left <= heiShow) {
      left = 0;
    } else {
      left = left - 0.5;
    }
    this.renderer.setStyle(ulBody, 'left', left + 'px');
    window.requestAnimationFrame(() => this.setTextScroll());
  }