文字无限循环滚动

 

在项目实现过程中,需要实现文字垂直循环滚动,第一时间想到使用css实现,不过先介绍一下js实现.

注:以下代码是基于vue的

1.js实现

原理:

       实际上就是一个计时器定时执行 top ++ ,当执行到底部时,top 值置0,回到顶部继续执行滚动,但这个会有一个明显的缺点,用户会明显的的感觉到,滚动到底部时,有一个跳跃到顶部的过程

实现:      

const timer = setInterval(autoScrollLine,30)

    /*单行向上滚动效果*/

function autoScrollLine() {

    /*判断滚动内容是否已经滚完，滚完了则滚动的值重新设置到0

    否则就每隔30毫秒向上滚动1px*/

    if(box.scrollTop>=parent.offsetHeight){

        box.scrollTop=0;

    }else{

        box.scrollTop++;

    }
}

关键点:

     1.判断是否到达底部

      2.超出父级高度的内容隐藏,overflow: hidden;

2.css3实现

     原理: 利用css3的动画实现

    实现: 

          

// css 代码

.rolling {
  height: 100%;
  ul.animation {
    animation: moving 40s linear infinite;
  }
  /*定义动画*/
  @keyframes moving {
    form {
      transform: translateY(0);
    }
    to {
      transform: translateY(-50%);
    }
  }
}

 为了在循环的时候显示更自然,需要copy一份,当循环到底部时,紧跟着出现的是copy的第一条信息,这样就不会存在js实现中的那种缺陷,使滚动更圆滑,体验会更好.

值得注意的是,并不是任何时候都需要滚动,如果数据比较少,不足以撑满整个div,这个时候就不需要copy一份数据了,这个在下面的代码力都有体现

this.isRolling = this.$refs.rollingContainer.offsetHeight - this.rollingHeight > 0

父级高度通过内容高度 * 2动态设置,这样就不需要关注具体的内容行高和数据的多少,体验会更流畅

this.$refs.rollingContainer.style.height = this.$refs.rollingContainer.offsetHeight * 2 + 'px';

 

 

 

 

​
<template>
  <div class="rolling overflow-hide" :style="{height: rollingHeight + 'px'}">
    <ul ref="rollingContainer" :class="{animation: isRolling}">
      <li v-for="(item, index) in eventWarning" :key="index" :class="{'warning': item.isRisk, 'flex': true}">
        {{item}}
      </li>
      <div v-if="isRolling">
        <li v-for="(item, index) in eventWarning" :key="index" :class="{'warning': item.isRisk, 'flex': true}">
          {{item}}
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import './index.scss'
export default {
  name: 'Rolling',
  props: {
    // 需要滚动内容列表, 默认数组
    eventWarning: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 需要滚动内容的高度,默认Number
    rollingHeight: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isRolling: false
    }
  },
  watch: {
    rollingHeight (val, oldVal) {
      if (val && val !== oldVal) {
        this.isRolling = this.$refs.rollingContainer.offsetHeight - this.rollingHeight > 0
        this.$refs.rollingContainer.style.height = this.$refs.rollingContainer.offsetHeight * 2 + 'px';
      }
    }
  }
}
</script>

​

当然以上的通过稍微修改也是适用于table或者其他形式的文字滚动的.

 

这样的设计使不需要关注内容是什么格式,内容过长自动换行也好,正好占满一行也好,内容不足不滚动,内容较多,自动复制,并启动滚动,省去了一些无用的操作,当然如果你不是使用vue实现,也没关系,原理就是这样,做适当的改变就可以完美使用.

 

总结,项目实现中,遇到很多奇怪的滚动,这个方式还是可以完美实现滚动的,当然代码的优雅度需要改善,但是功能是可以实现的,不存在卡顿和跳跃的情况,当然如果有什么好的建议欢迎指正,不喜勿喷.