滚动条--向上

最新推荐文章于 2021-01-13 09:28:18 发布

八月的猪猪

最新推荐文章于 2021-01-13 09:28:18 发布

阅读量166

点赞数

分类专栏：前端文章标签：向上滚动滚动条

本文链接：https://blog.csdn.net/qq_42894622/article/details/90217154

版权

前端专栏收录该内容

123 篇文章 3 订阅

订阅专栏

个人blog，欢迎关注加收藏

向上滚动

<!-- html -->
<dd style="height:20px;overflow:hidden;">
    <ul id='marquee'>
        <li v-for="(item,index) in scrollArr" :key="index">{{item}}</li>
    </ul>
</dd>

<!-- css -->
<style>
    #marquee p{height:20px;line-height: 20px;margin:0}
</style>

//js
data () {
    return {
        congratulationText:[
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',
            'xxxxxx上传了祝福语',
            'xxxxxx上传了绘画作品',

        ],//祝贺信息列表
        timeout:"",//记录计时器
    }
  },

   

   methods:{
    //滚动条
    scrollAnimation(){
        let _this = this;
        clearTimeout(_this.timeout);
        var marquee = document.getElementById('marquee');
        var offset=0;
        // console.log(marquee,'marquee')
        if(marquee == null){
            return
        }
        var scrollheight =  marquee.offsetHeight;//整个高度
        var firstNode = marquee.children[0].cloneNode(true);
        marquee.removeChild(marquee.children[0]);//还有这里
        marquee.appendChild(firstNode);//还有这里
        if(offset == scrollheight){
            offset = 0;
        }
        marquee.style.marginTop = "-"+offset+"px";
        offset += 1;
        _this.timeout = setTimeout(_this.scrollAnimation,1000);
    }
   }