布局tabs滚动条无法设置右边距,因为内部盒子会占用可见试图的100宽到这里的可见视图截至可见视图外的算溢出的元素,不参与实际box的边距、大小限定。所以初始的tabs可以设置边距,而最后一个无法设置...
tabs
滚动条无法设置右边距,因为内部盒子会占用可见试图的100%
宽
到这里的可见视图截至
可见视图外的算溢出的元素,不参与实际box
的边距、大小限定。
所以初始的tabs
可以设置边距,而最后一个无法设置边距
你需要用一个更大的tabs
栏将实际的tabs
栏套住,设置内边距
像是这样,然后配置红色的大tabs
栏的内边距就可以了
在这里使用到了scroll-behavior: smooth;
/* 自定义添加动画效果的 CSS 类 */
:deep(.el-scrollbar__wrap) {
/* 添加滚动动画效果 */
scroll-behavior: smooth;
}
该属性可以给滚动条添加动画效果,你也可以使用js
的方式添加该属性
// 通过 JavaScript 直接添加 scroll-behavior: smooth; 属性
document.querySelector('.scrollbar-with-animation').style.scrollBehavior = 'smooth';
使用该属性需要注意兼容性问题,目前,scroll-behavior: smooth;
属性的平滑滚动行为受到以下主流浏览器的支持:
● Google Chrome
● Firefox
● Safari
● Microsoft Edge
然而,Internet Explorer
不支持 scroll-behavior: smooth;
属性。因此,在使用该属性时,需要特别注意向用户提供替代方案,以确保在不支持该属性的浏览器上也能够提供良好的用户体验。