项目首页需要展示一个表格滚动区域，特此来记录一下

HTML

<div class="table-box" @mouseenter="mouseenter" @mouseleave="mouseleave"><el-table :data="tableList" border height="400px" v-loading="tableLoading"><el-table-column prop="id" label="编号"><template slot-scope="scope"><el-link type="primary" @click="openNewTab(scope.row)">{{scope.row.id}}</el-link></template></el-table-column><el-table-column prop="name" label="名称" show-overflow-toolltip></el-table-column><el-table-column prop="desc" label="描述" show-overflow-toolltip></el-table-column><el-table-column prop="createTime" label="创建时间" show-overflow-toolltip></el-table-column><el-table-column prop="createBy" label="创建人" show-overflow-toolltip></el-table-column></el-table>
</div>

JS

data(){return {tableLoading : false,timer: null,tableList: []}
},
watch: {currentData: {handler(val){this.clearTimer()if(val){this.getList()}}}
},
methods: {clearTimer(){if(this.timer) clearInterval(this.timer);this.timer = null;//重复渲染数据时，先清空，将滚动条置顶，防止出现bugthis.tableList = [];if(document.getElementsByClassName('el-table__body-wrapper')[0]){document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0;}},async getList(){this.tableLoading = true;let params = {page: {current: 1,size: 100},vo: {currentData: this.currentData}}const res = await installServer.getDetailList(params);this.tableLoading = false;if(res.success){this.tableList = res.data.resords || [];this.$nextTick(()=>{if(this.dataList.length) this.handleScroll()})}},handleScroll(){this.$nextTick(()=>{const EL = document.getElementsByClassName('el-table__body-wrapper')[0];const innerEL = document.getElementsByClassName('el-table__body')[0];const clientHeight = EL.clientHeight;//容器高度const innerHeight = innerEL.clientHeight;//内部table高度//内部搞不大于容器高度，需要滚动if(innerHeight > clientHeight ){let scrollTop = EL.scrollTop;this.timer = setInterval(()=>{if(scrollTop < innerHeight  - clientHeight ){scrollTop += parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;}else {scrollTop = 0;}EL.scrollTop = scrollTop;}, 50)}})},mouseenter(){if(this.timer) clearInterval(this.timer);this.timer = null;},mouseleave(){this.handleScroll()}
}

CSS（修改滚动条样式）

.el-table__body-wrapper {&::-webkit-scrollbar {width: 6px !important;height: 6px !important;}&::-webkit-scrollbar-thumb {background-color: #ccc;border-radius: 3px;}&::-webkit-scrollbar-track {background-color: transparent !important;}
}
/* element ui为原生滚动条预留宽度17px, 重置滚动条样式后会距离右边有空白  */
.el-table__body-wrapper .el-table__body {width: 100% !important;
}
.el-tablecolgroup col[name='gutter'] {width: 6px !important;/*这个是table-header距离右边的距离，设置为滚动条宽*/
}
.el-table__header-wrapper .el-table__header tr th {background-color: #5197E6 !important;color: #fff;border-color: #5ca7fd;
}