JS实现新闻播报滚动效果

效果图

    1. 横向滚动播报

    2. 纵向滚动播报

横向滚动

<template>
  <div class="wrapper">
    <div class="top">
      <div class="top-cont" ref="top_cont">
        <div class="begin" ref="top_begin" v-html="txt"></div>
        <div class="end" ref="top_end" v-html="txt"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      txt: '我一直相信释迦牟尼说的一句话，无论你遇见谁，他都是你生命该出现的人，绝非偶然，他一定会教会你一些什么，所以我也相信，无论我走到哪里，那都是我该去的地方，经历一些我该经历的事，遇见我该遇见的人，若无相欠，怎会相见......&nbsp;&nbsp;&nbsp;&nbsp;'
    }
  },
  mounted () {
    this.scrollLeft()
  },
  methods: {
    scrollLeft () {
      let topCont = this.$refs.top_cont
      let topBegin = this.$refs.top_begin
      let topEnd = this.$refs.top_end

      let timer = setInterval(quee, 30)

      function quee () {
        if (topEnd.offsetWidth - topCont.scrollLeft <= 0) {
          topCont.scrollLeft -= topBegin.offsetWidth
        } else {
          topCont.scrollLeft++
        }
      }

      topCont.onmouseenter = function () {
        clearInterval(timer)
      }

      topCont.onmouseleave = function () {
        timer = setInterval(quee, 30)
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper .top {
  width: 100%;
  height: 30%;
  border-bottom: 1px solid gray;
  box-sizing: border-box;
  padding: 0 300px;
  display: flex;
  align-items: center;
}

.wrapper .top .top-cont {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background: black;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
}

.wrapper .top .top-cont .begin {
  display: inline-block;
}

.wrapper .top .top-cont .end {
  display: inline-block;
}
</style>

纵向滚动

<template>
  <div class="wrapper">
    <div class="top">
      <div class="top-cont" ref="top_cont">
        <div class="begin" ref="top_begin" v-html="txt"></div>
        <div class="end" ref="top_end" v-html="txt"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arrTxt: [
        { txt: '小兔子要上床睡觉了，它紧紧抓着大兔子的长耳朵，要大兔子好好听它说。“猜猜我有多爱你？”小兔子问。“奥！我大概猜不出来。”大兔子笑笑地说。“我爱你这么多。”小兔子把手臂张开，开得不能再开。大兔子有更长的手臂，它张开来一比，说：“可是，我爱你这么多。”' },
        { txt: '小兔子动动右耳，想：“嗯，这真的很多。”“我爱你，像我举得这么高，高得不能再高。”小兔子说，双臂用力往上撑举。“我爱你，像我举的这么高，高的不能再高。”大兔子也说。小兔子想，真糟，他又比我高。小兔子又有个好主意，它把脚顶在树干上倒立了起来。' },
        { txt: '它说，“我爱你到我的脚趾头这么多。”大兔子一把抓起小兔子的手，将它抛起来，飞得比它的头还高，说：“我爱你到你的脚趾头这么多。”小兔子大叫：“我爱你，一直到过了小路，在远远的河那边。”大兔子说：“我爱你，一直到过了小河，越过山的那一边。”' },
        { txt: '小兔子想，那真的好远。它揉揉红红的两眼，开始困了，想不出来了。它抬头看着树丛后面那一大片的黑夜，觉得再也没有任何东西比天空更远了。大兔子轻轻抱起频频打着哈欠的小兔子，小兔子闭上了眼睛，在进入梦乡前，喃喃说：“我爱你，从这里一直到月亮。”' },
        { txt: '“奧！那么远。”大兔子说。真的非常远、非常远。大兔子轻轻将小兔子放到叶子铺成的床上，低下头来，亲亲它，祝它晚安。然后，大兔子躺在小兔子的旁边，小声地微笑着说：“我爱你，从这里一直到月亮，再绕回来。”' },
        { txt: '我爱你，要比你爱我更多更长。' }
      ]
    }
  },
  mounted () {
    this.scrollTop()
  },
  methods: {
    scrollTop () {
      let btmCont = this.$refs.btm_cont
      let btmBegin = this.$refs.btm_begin
      this.labelScroll(btmCont, btmBegin, 1, 30, 2500)
    },
    labelScroll (scrollBox, contentBox, speed, timesp, delayTime, num) {
      let minspeed = 1
      if (window.innerWidth > 1900) {
        minspeed = 1.5
      }
      let speeds = speed || minspeed
      let timesps = timesp || 100
      let nums = num || 0
      let delayTimes = delayTime || 0
      // 定时器标识
      let timer
      let timeoutStart
      let timeoutEnd
      // 鼠标是否在容器内标识
      let isMouseIn = false
      // 滚动到容器顶部标识
      let isTop = true
      // 鼠标是否在容器内标识
      let isBottom = false

      if (scrollBox) {
        // 异步解决渲染延迟
        setTimeout(function () {
          // 滚动时触发判断是否滚动到底部
          let isBottomFn = function () {
            // 判断后取整再判断，避免到底时scrollTop为小数无法进入判断,切换页面时节点消失，
            // div的以上打印的3个变量都为0，无法滚动，不会再触发滚动事件的代码，实现自动清除定时器功能
            if (scrollBox.scrollTop + scrollBox.offsetHeight >= scrollBox.scrollHeight - nums || Math.ceil(scrollBox.scrollTop) + scrollBox.offsetHeight >= scrollBox.scrollHeight - nums) {
              // 到底后先清除滚动定时器，否则定时器一直执行，一直到底，把timeoutEnd延时器设置了又清了，
              // 一直循环，无法延时2秒执行
              clearInterval(timer)
              clearTimeout(timeoutEnd)
              timeoutEnd = setTimeout(function () {
                scrollBox.scrollTop = 0
              }, 2000)
            }
          }

          // 判断并设置顶部\底部标识
          let initPlag = function () {
            if (scrollBox.scrollTop === 0) {
              isTop = true
            } else {
              isTop = false
            }
            if (scrollBox.scrollTop + scrollBox.offsetHeight >= scrollBox.scrollHeight) {
              isBottom = true
            } else if (Math.ceil(scrollBox.scrollTop) + scrollBox.offsetHeight >= scrollBox.scrollHeight) {
              isBottom = true
            } else {
              isBottom = false
            }
          }
          // 在渲染后才去获取高度和判断
          // 页面内容足够多时才滚动
          if (scrollBox.offsetHeight < scrollBox.scrollHeight) {
            let scrollfun = function () {
              // 获取原来的滚动高度
              let sTop = scrollBox.scrollTop
              sTop = sTop + speeds
              // 更新滚动高度
              scrollBox.scrollTop = sTop
              isBottomFn()
            }

            clearTimeout(timeoutStart)
            timeoutStart = setTimeout(function () {
              clearInterval(timer)
              timer = setInterval(scrollfun, timesps)
            }, delayTimes)

            // 清空上一次绑定的事件
            scrollBox.onmouseenter = null
            scrollBox.onmouseleave = null
            scrollBox.onmouseenter = function () {
              isMouseIn = true
              clearTimeout(timeoutStart)
              clearTimeout(timeoutEnd)
              clearInterval(timer)
            }

            scrollBox.onmouseleave = function () {
              isMouseIn = false
              initPlag()
              // 如果鼠标离开时刚好滚动到顶部，则延时2秒再开定时器
              if (isTop) {
                clearTimeout(timeoutStart)
                timeoutStart = setTimeout(function () {
                  clearInterval(timer)
                  timer = setInterval(scrollfun, timesps)
                }, delayTimes)
              } else {
                clearInterval(timer)
                timer = setInterval(scrollfun, timesps)
              }
            }
            // 鼠标滚动到底部时自动切换滚动高度，实现无缝连接效果
            scrollBox.onscroll = function () {
              initPlag()
              if (scrollBox.scrollTop === 0 && !isMouseIn) {
                // 跳到顶部后延迟2秒再滚动
                clearTimeout(timeoutStart)
                timeoutStart = setTimeout(function () {
                  clearInterval(timer)
                  timer = setInterval(scrollfun, timesps)
                }, delayTimes)
              }
            }
          }
        }, 1)
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper .btm {
  width: 100%;
  height: 70%;
}

.wrapper .btm .btm-cont {
  width: 40%;
  height: 400px;
  margin: 50px auto 0;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 40px;
  font-size: 20px;
  background: #0f0f0f;
  overflow: auto;
  position: relative;
  color: #fff;
  cursor: pointer;
}

.wrapper .btm .btm-cont .begin p {
  text-indent: 2em;
}

/*去掉滚动条*/
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #F5F5F5;
}
</style>