在vue中实现列表自动滚动

最新推荐文章于 2024-12-10 11:46:14 发布

green_hand_bb

最新推荐文章于 2024-12-10 11:46:14 发布

阅读量1.2k

点赞数 2

文章标签： safari javascript css

本文链接：https://blog.csdn.net/green_hand_bb/article/details/124926714

版权

Vue 滚动动画 JavaScript DOM操作 CSS样式

关键词由CSDN通过智能技术生成

<template>
  <div>
    <div id="parent" class="parent">
      <div id="child1" class="child">
          <div class="box" v-for="item in 20" :key="item">{{item}}</div>
      </div>
      <div id="child2" class="child"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
  return{

  }
  },
  mounted() {
    this.scrolls()
  },
  methods: {
    scrolls() {
        var parent = document.getElementById('parent');
        var child1 = document.getElementById('child1');
        var child2 = document.getElementById('child2');
        child2.innerHTML = child1.innerHTML;
        setInterval(function () {
          if(parent.scrollTop >= child1.scrollHeight) {
            parent.scrollTop = 0;
          } else {
            parent.scrollTop+=2;
          }
        }, 20);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*::-webkit-scrollbar {*/
/*  display: none; !* Chrome Safari *!*/
/*}*/
.parent {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  background: #242424;
  overflow: hidden;
}
/*设置的子盒子高度大于父盒子，产生溢出效果*/
.child {
  height: auto;
}
.box{
  margin: 10px 0;
  height:50px
}
.box:nth-of-type(n){
  background: #a50202;
}
.box:nth-of-type(2n){
  background: #009c67
}
</style>