前端如何利用JS實現(xiàn)自定義表格滾動效果實例
更新時間：2024年09月28日 08:42:55 作者：張大炮er
在數(shù)據(jù)可視化大屏中,滾動表格是一種常見的需求,本文介紹了如何利用scrollTop屬性和定時器來制作滾動效果,不依賴于任何插件,可以實現(xiàn)自定義的滾動表格,文中通過代碼介紹是非常詳細,需要的朋友可以參考下
在數(shù)據(jù)可視化大屏中會有滾動表格的需求，不使用插件自己封裝重復使用！?。?！
好久不見！話不多說，直接上代碼?。。。。。。。。?！
一、利用scrollTop、定時器實現(xiàn)滾動效果
scrollTop為元素滾動條滾動距離
roll(t) {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var table = document.getElementById("table");
table.scrollTop = 0; // 開始無滾動時設為0 滾動距離
// 當內(nèi)容小于父元素不實現(xiàn)滾動
if (box1.scrollHeight >= table.scrollHeight) {
box2.innerHTML = box1.innerHTML;
}
this.timer = setInterval(this.rollStart, t); // 設置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
// 鼠標移入div時暫停滾動
table.onmouseover = () => {
clearInterval(this.timer);
}
// 鼠標移出div后繼續(xù)滾動
table.onmouseout = () => {
this.timer = setInterval(this.rollStart, t);
}
},
rollStart() {
// 上面聲明的DOM對象為局部對象需要再次聲明
var box1 = document.getElementById("box1");
var table = document.getElementById("table");
// 正常滾動不斷給scrollTop的值+1,當滾動高度大于列表內(nèi)容高度時恢復為0,scrollTop滾動條滾動的距離
if (table.scrollTop >= box1.scrollHeight) {
table.scrollTop = 0;
} else {
table.scrollTop += 1;
}
}二、效果展示
三、完整代碼實現(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: '張無忌',
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; // 開始無滾動時設為0 滾動距離
if (box1.scrollHeight >= table.scrollHeight) {
box2.innerHTML = box1.innerHTML;
}
this.timer = setInterval(this.rollStart, t); // 設置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
// 鼠標移入div時暫停滾動
table.onmouseover = () => {
clearInterval(this.timer);
}
// 鼠標移出div后繼續(xù)滾動
table.onmouseout = () => {
this.timer = setInterval(this.rollStart, t);
}
},
rollStart() {
// 上面聲明的DOM對象為局部對象需要再次聲明
var box1 = document.getElementById("box1");
var table = document.getElementById("table");
// 正常滾動不斷給scrollTop的值+1,當滾動高度大于列表內(nèi)容高度時恢復為0,scrollTop滾動條滾動的距離
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>總結
到此這篇關于前端如何利用JS實現(xiàn)自定義表格滾動效果的文章就介紹到這了,更多相關JS自定義表格滾動效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript 驗證碼的實例代碼(附效果圖)，需要的朋友可以參考一下2013-03-03
前端在線預覽PDF文件三種實現(xiàn)方式(兼容移動端)
這篇文章主要介紹了前端在線預覽PDF文件三種實現(xiàn)方式的相關資料,分別是使用微軟在線預覽地址、直接使用window.open打開文檔鏈接以及使用PDF.js,PDF.js方法穩(wěn)定,適用于大多數(shù)文件,每種方法都給出了詳細的代碼示例,需要的朋友可以參考下2025-02-02
這篇文章主要為大家介紹了前端面向對象編程之ES5語法ES6語法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
JavaScript手寫源碼之omit函數(shù)的實現(xiàn)
最近突然有個新的想法，想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實現(xiàn)一個omit函數(shù)吧2023-02-02![文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]](http://img.jbzj.com/images/xgimg/bcimg4.png)
在文本框中輸入完內(nèi)容后,經(jīng)常需要按回車,焦點跳到下個文本框,或者觸發(fā)按鈕事件2010-06-06
這篇文章主要介紹了JS判斷點是否在線段上的相關資料,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要教大家如何簡單實現(xiàn)js放大鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了js實現(xiàn)鼠標懸停圖片上時滾動文字說明的方法,涉及js操作鼠標事件的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了如何在 JavaScript 中更好地使用數(shù)組，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了異步安全加載javascript文件的方法,實例分析了javascript實現(xiàn)文件異步加載的具體技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07