快捷導(dǎo)航

前端如何利用JS實(shí)現(xiàn)自定義表格滾動(dòng)效果實(shí)例

更新時(shí)間：2024年09月28日 08:42:55 作者：張大炮er

在數(shù)據(jù)可視化大屏中,滾動(dòng)表格是一種常見(jiàn)的需求,本文介紹了如何利用scrollTop屬性和定時(shí)器來(lái)制作滾動(dòng)效果,不依賴于任何插件,可以實(shí)現(xiàn)自定義的滾動(dòng)表格,文中通過(guò)代碼介紹是非常詳細(xì),需要的朋友可以參考下

一、利用scrollTop、定時(shí)器實(shí)現(xiàn)滾動(dòng)效果

scrollTop為元素滾動(dòng)條滾動(dòng)距離

roll(t) {
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var table = document.getElementById("table");
            table.scrollTop = 0; // 開(kāi)始無(wú)滾動(dòng)時(shí)設(shè)為0 滾動(dòng)距離
            // 當(dāng)內(nèi)容小于父元素不實(shí)現(xiàn)滾動(dòng)
            if (box1.scrollHeight >= table.scrollHeight) {
                box2.innerHTML = box1.innerHTML;
            }
            this.timer = setInterval(this.rollStart, t); // 設(shè)置定時(shí)器，參數(shù)t用在這為間隔時(shí)間（單位毫秒），參數(shù)t越小，滾動(dòng)速度越快
            // 鼠標(biāo)移入div時(shí)暫停滾動(dòng)
            table.onmouseover = () => {
                clearInterval(this.timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動(dòng)
            table.onmouseout = () => {
                this.timer = setInterval(this.rollStart, t);
            }
        },
        rollStart() {
            // 上面聲明的DOM對(duì)象為局部對(duì)象需要再次聲明
            var box1 = document.getElementById("box1");
            var table = document.getElementById("table");
            // 正常滾動(dòng)不斷給scrollTop的值+1,當(dāng)滾動(dòng)高度大于列表內(nèi)容高度時(shí)恢復(fù)為0,scrollTop滾動(dòng)條滾動(dòng)的距離
            if (table.scrollTop >= box1.scrollHeight) {
                table.scrollTop = 0;
            } else {
                table.scrollTop += 1;
            }
        }

二、效果展示

三、完整代碼實(shí)現(xiàn)

<template>
    <div>
        <div class="cont">
            <div class="title-cont">
                <div class="title" v-for="item in titleList">
                    {{ item.title }}
                </div>
            </div>
            <div class="table" id="table">
                <div id="box1">
                    <div class="content" v-for="item in tableData">
                        <div class="item">{{ item.name }}</div>
                        <div class="item">{{ item.phone }}</div>
                        <div class="item">{{ item.age }}</div>
                    </div>
                </div>
                <div id="box2"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            titleList: [
                {
                    title: '姓名'
                },
                {
                    title: '電話'
                },
                {
                    title: '年齡'
                }
            ],
            tableData: [
                {
                    name: '張三',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '李四',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '王五',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '趙六',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '田七',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '田八',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '張三豐',
                    phone: '1515151',
                    age: '23'
                },
                {
                    name: '張無(wú)忌',
                    phone: '1515151',
                    age: '23'
                }

            ],
            timer: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.roll(20);
        })
    },
    methods: {
        roll(t) {
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var table = document.getElementById("table");
            table.scrollTop = 0; // 開(kāi)始無(wú)滾動(dòng)時(shí)設(shè)為0 滾動(dòng)距離
            if (box1.scrollHeight >= table.scrollHeight) {
                box2.innerHTML = box1.innerHTML;
            }
            this.timer = setInterval(this.rollStart, t); // 設(shè)置定時(shí)器，參數(shù)t用在這為間隔時(shí)間（單位毫秒），參數(shù)t越小，滾動(dòng)速度越快
            // 鼠標(biāo)移入div時(shí)暫停滾動(dòng)
            table.onmouseover = () => {
                clearInterval(this.timer);
            }
            // 鼠標(biāo)移出div后繼續(xù)滾動(dòng)
            table.onmouseout = () => {
                this.timer = setInterval(this.rollStart, t);
            }
        },
        rollStart() {
            // 上面聲明的DOM對(duì)象為局部對(duì)象需要再次聲明
            var box1 = document.getElementById("box1");
            var table = document.getElementById("table");
            // 正常滾動(dòng)不斷給scrollTop的值+1,當(dāng)滾動(dòng)高度大于列表內(nèi)容高度時(shí)恢復(fù)為0,scrollTop滾動(dòng)條滾動(dòng)的距離
            if (table.scrollTop >= box1.scrollHeight) {
                table.scrollTop = 0;
            } else {
                table.scrollTop += 1;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.cont {
    width: 50vw;
    height: 50vh;
    margin: 0 auto;

    .table {
        margin: 0 auto;
        width: 300px;
        height: 200px;
        border: 1px solid #ddd;
        overflow: hidden;
        .content {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;

            .item {
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
        }

    }

    .title-cont {
        display: flex;
        align-items: center;
        justify-content: center;

        .title {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #333;

            &:not(&:first-of-type) {
                border-left: none;
            }
        }
    }

}
</style>