首页 话题 小组 问答 好文 用户 我的社区 域名交易

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

发布于 2025-03-16 18:20:17
0
15

布局tabs滚动条无法设置右边距,因为内部盒子会占用可见试图的100宽到这里的可见视图截至可见视图外的算溢出的元素,不参与实际box的边距、大小限定。所以初始的tabs可以设置边距,而最后一个无法设置...

图片alt

布局

tabs滚动条无法设置右边距,因为内部盒子会占用可见试图的100%

图片alt


到这里的可见视图截至

图片alt


可见视图外的算溢出的元素,不参与实际box的边距、大小限定。
所以初始的tabs可以设置边距,而最后一个无法设置边距

图片alt

图片alt



你需要用一个更大的tabs栏将实际的tabs栏套住,设置内边距

图片alt


像是这样,然后配置红色的大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; 属性。因此,在使用该属性时,需要特别注意向用户提供替代方案,以确保在不支持该属性的浏览器上也能够提供良好的用户体验。

评论
凯特网
Lv.1普通用户

99

帖子

11

小组

651

积分

站长交流