前端利用JS实现自定义表格滚动效果

在数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！
很久不见！话不多说，直接上代码！！！！！！！！！！

一、利用scrollTop、定时器实现滚动效果

scrollTop为元素滚动条滚动隔断

1. roll(t) {
2.             var box1 = document.getElementById("box1");
3.             var box2 = document.getElementById("box2");
4.             var table = document.getElementById("table");
5.             table.scrollTop = 0; // 开始无滚动时设为0 滚动距离
6.             // 当内容小于父元素不实现滚动
7.             if (box1.scrollHeight >= table.scrollHeight) {
8.                 box2.innerHTML = box1.innerHTML;
9.             }
10.             this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
11.             // 鼠标移入div时暂停滚动
12.             table.onmouseover = () => {
13.                 clearInterval(this.timer);
14.             }
15.             // 鼠标移出div后继续滚动
16.             table.onmouseout = () => {
17.                 this.timer = setInterval(this.rollStart, t);
18.             }
19.         },
20.         rollStart() {
21.             // 上面声明的DOM对象为局部对象需要再次声明
22.             var box1 = document.getElementById("box1");
23.             var table = document.getElementById("table");
24.             // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离
25.             if (table.scrollTop >= box1.scrollHeight) {
26.                 table.scrollTop = 0;
27.             } else {
28.                 table.scrollTop += 1;
29.             }
30.         }

复制代码

 二、效果展示

三、完备代码实现

1. <template>
2.     <div>
3.         <div class="cont">
4.             <div class="title-cont">
5.                 <div class="title" v-for="item in titleList">
6.                     {{ item.title }}
7.                 </div>
8.             </div>
9.             <div class="table" id="table">
10.                 <div id="box1">
11.                     <div class="content" v-for="item in tableData">
12.                         <div class="item">{{ item.name }}</div>
13.                         <div class="item">{{ item.phone }}</div>
14.                         <div class="item">{{ item.age }}</div>
15.                     </div>
16.                 </div>
17.                 <div id="box2"></div>
18.             </div>
19.         </div>
20.     </div>
21. </template>
23. <script>
24. export default {
25.     data() {
26.         return {
27.             titleList: [
28.                 {
29.                     title: '姓名'
30.                 },
31.                 {
32.                     title: '电话'
33.                 },
34.                 {
35.                     title: '年龄'
36.                 }
37.             ],
38.             tableData: [
39.                 {
40.                     name: '张三',
41.                     phone: '1515151',
42.                     age: '23'
43.                 },
44.                 {
45.                     name: '李四',
46.                     phone: '1515151',
47.                     age: '23'
48.                 },
49.                 {
50.                     name: '王五',
51.                     phone: '1515151',
52.                     age: '23'
53.                 },
54.                 {
55.                     name: '赵六',
56.                     phone: '1515151',
57.                     age: '23'
58.                 },
59.                 {
60.                     name: '田七',
61.                     phone: '1515151',
62.                     age: '23'
63.                 },
64.                 {
65.                     name: '田八',
66.                     phone: '1515151',
67.                     age: '23'
68.                 },
69.                 {
70.                     name: '张三丰',
71.                     phone: '1515151',
72.                     age: '23'
73.                 },
74.                 {
75.                     name: '张无忌',
76.                     phone: '1515151',
77.                     age: '23'
78.                 }
80.             ],
81.             timer: null,
82.         }
83.     },
84.     mounted() {
85.         this.$nextTick(() => {
86.             this.roll(20);
87.         })
88.     },
89.     methods: {
90.         roll(t) {
91.             var box1 = document.getElementById("box1");
92.             var box2 = document.getElementById("box2");
93.             var table = document.getElementById("table");
94.             table.scrollTop = 0; // 开始无滚动时设为0 滚动距离
95.             if (box1.scrollHeight >= table.scrollHeight) {
96.                 box2.innerHTML = box1.innerHTML;
97.             }
98.             this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
99.             // 鼠标移入div时暂停滚动
100.             table.onmouseover = () => {
101.                 clearInterval(this.timer);
102.             }
103.             // 鼠标移出div后继续滚动
104.             table.onmouseout = () => {
105.                 this.timer = setInterval(this.rollStart, t);
106.             }
107.         },
108.         rollStart() {
109.             // 上面声明的DOM对象为局部对象需要再次声明
110.             var box1 = document.getElementById("box1");
111.             var table = document.getElementById("table");
112.             // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0,scrollTop滚动条滚动的距离
113.             if (table.scrollTop >= box1.scrollHeight) {
114.                 table.scrollTop = 0;
115.             } else {
116.                 table.scrollTop += 1;
117.             }
118.         }
119.     }
120. }
121. </script>
123. <style lang="scss" scoped>
124. .cont {
125.     width: 50vw;
126.     height: 50vh;
127.     margin: 0 auto;
129.     .table {
130.         margin: 0 auto;
131.         width: 300px;
132.         height: 200px;
133.         border: 1px solid #ddd;
134.         overflow: hidden;
135.         .content {
136.             width: 100%;
137.             height: 40px;
138.             display: flex;
139.             align-items: center;
140.             justify-content: center;
142.             .item {
143.                 width: 100px;
144.                 height: 40px;
145.                 text-align: center;
146.                 line-height: 40px;
147.             }
148.         }
150.     }
152.     .title-cont {
153.         display: flex;
154.         align-items: center;
155.         justify-content: center;
157.         .title {
158.             width: 100px;
159.             height: 40px;
160.             text-align: center;
161.             line-height: 40px;
162.             border: 1px solid #333;
164.             &:not(&:first-of-type) {
165.                 border-left: none;
166.             }
167.         }
168.     }
170. }
171. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。