iview table 滚动条到底部及样式设定

月下脆竹書閣

已于 2024-04-01 13:23:14 修改

阅读量982

点赞数

分类专栏： VUE 文章标签： view design vue.js 前端

于 2022-08-30 11:23:49 首次发布

本文链接：https://blog.csdn.net/c_x_m/article/details/126600252

版权

VUE 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

1. iview table 滚动条到底部

iview table 滚动条到底部
iview table组件设置固定高度后，添加数据时滚动条到底部

this.$nextTick(() => {
 // 当滚动条从没有到有时，不加setTimeout滚动条将不会滚动到底部
 setTimeout(() => {
     let overflowY = this.$el.getElementsByClassName('ivu-table-body')[0]
     if (!overflowY) {
         return
     }
     overflowY.scrollTop = overflowY.scrollHeight + 34
     }, 1)
 })

2.滚动条样式修改

//::-webkit-scrollbar 整个滚动条.
//::-webkit-scrollbar-thumb  滚动条上的滚动滑块.
//::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
//::-webkit-scrollbar-button 滚动条上的按钮 (上下箭头).
//::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
//::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分.
//::-webkit-resizer 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

.borderRadius {
	border-radius: 5px;
}

// 滚动条整体部分
::-webkit-scrollbar {
	width: 9px; // 垂直滚动条
	height: 9px; // 水平滚动条

	&-track {
		.borderRadius;
	}

	&-thumb {
		.borderRadius;
		background-color: #d2d3d7cc;
	}
}
//兼容火狐浏览器 滚动条样式
html {
	* {
		scrollbar-color: #d2d3d7cc #f5f7f9;
		scrollbar-width: thin;
	}
}