走马灯的实现

工作中业务需要的情况下，可能需要走马灯信息的显示。初看起来可能繁琐，但实际上只要设置定时器，通过与父级的相对定位，然后利用元素本身样式中的的left属性，就可以实现。具体来说看下例，本例以vue实现为例：
外部元素id="scroll"是父级容器，绝对定位，设置为150px的宽度，内部id="scrollcontent"是我们希望以父容器作为参照进行滚动的元素，另外，当内容很短的时候，短到150px能够容纳时，我们希望固定显示。利用一个switch控件进行切换，整体效果如下：

首先template来说，除了切换控件，父容器scroll、用于显示滚动内容的scrollcontent、以及用于显示固定内容的scrollcontentstatic，切换时渲染相应长短内容

<template>
  <div>
    <el-switch
      v-model="isLong"
      active-text="长"
      inactive-text="短">
    </el-switch>
    <div id="scroll">
      <div v-if="isLong" id="scrollcontent">{{ contentLong }}</div>
      <div v-if="!isLong" id="scrollcontentstatic">{{ contentShort }}</div>
    </div>
  </div>
</template>

样式方面，父级元素水平居中的一个宽度为150px的绝对定位元素。
子元素要实现滚动效果，也是绝对定位，然后设置left:0，同时设置不要换行显示

  #scroll {
    position: absolute;
    overflow:hidden;
    left: calc(50% - 75px);
    width: 150px;
    height: 21px;
  }
  #scrollcontent {
    position: absolute;
    left:0px;
    white-space:nowrap;
  }

实现滚动效果的逻辑：设置定时器，在一定时间间隔内不断将内部元素的left左移1像素，当元素最左的位置已经超过了其实际长度时，将它的左边位置设置为父容器最右侧

    objScroll () {
      const objParent = document.getElementById('scroll')
      const objChild = document.getElementById('scrollcontent')
      let widthObject = objChild.offsetWidth
      if (parseInt(objChild.style.left) > (widthObject * (-1))) {
        objChild.style.left = parseInt(objChild.style.left) - 1 + 'px'
      } else {
        objChild.style.left = objParent.offsetWidth + 'px'
      }
    }

定时器决定了滚动的快慢，这里以0.1秒移动1px的速度进行滚动，同时当切换按钮时监听isLong创建或销毁定时器

  watch: {
    isLong (newVal) {
      if (newVal) {
        this.timer = setInterval(this.objScroll, 100)
      } else {
        clearInterval(this.timer)
      }
    }
  }

具体情况可以根据实际需要进行调整，同时因为使用了绝对定位，我们能够确切知道子元素的实际显示宽度，实际中也可以通过判断子元素的显示宽度objChild.offsetWidth进行逻辑判断是否显示滚动或固定位置
github:
https://github.com/tanglingjia/exp/blob/master/src/components/Rolling.vue