[分享]后台tabs滚动条布局和动画解析

布局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; 属性。因此，在使用该属性时，需要特别注意向用户提供替代方案，以确保在不支持该属性的浏览器上也能够提供良好的用户体验。