scroll-marker实现tab效果

前言

tab 组件是我们经常使用到的,以前实现方式大多需要借助js去动态判断当前展示的是哪个tab项,再动态渲染对应的项,若需要实现过度动画还需要比较复杂的控制。最近发现一个很好用的css属性scroll-marker可以直接实现tab效果并且还有切换动画。

效果展示

实现代码

html 部分

html部分仅需要填入内容即可,使用--tab-title变量来传递tab的标题

html 复制代码
<div class="tab">
  <div class="item" style="--tab-title: 'tab1';">tab content 1</div>

  <div class="item" style="--tab-title: 'tab2';">
    <h3>tab content 2</h3>
    <p>1212312</p>
  </div>

  <div class="item" style="--tab-title: 'tab3';">tab content 3</div>

  <div class="item" style="--tab-title: 'tab4';">tab content 4</div>
</div>

css 部分

::scroll-marker-group:伪元素,是子元素的::scroll-marker的父节点,有before和after两个值,表示该伪元素是在tab的前面还是后面

::scroll-marker:伪元素,与每一项直接关联,点击后tab会滚动到对应项的位置

:target-current:伪类,表示当前滚动的位置

css 复制代码
.tab {
  display: flex;
  flex-direction: row;
  position: relative;

  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /** 平滑滚动 */
  scroll-marker-group: before;
}

.tab::scroll-marker-group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  height: 36px;
  line-height: 36px;
  width: 100%;
  border-bottom: 1px solid #ccc;
}

.tab .item {
  scroll-snap-align: start;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.tab .item::scroll-marker {
  display: inline-block;
  content: var(--tab-title);
  text-decoration: none;
  color: #333;
  padding: 0 8px;
  height: 34px;
  line-height: 34px;
  border-bottom: 2px solid transparent;
}

.tab .item::scroll-marker:hover {
  color: #409eff;
}

.tab .item::scroll-marker:target-current {
  color: #409eff;
  border-color: #409eff;
}

总结

利用scroll-marker还可以实现更多有趣的效果,例如侧导航栏、轮播图等。但是目前浏览器对该伪类的支持还不是很好,可以在不兼容老版本浏览器的情况下使用。

最后推荐一下低代码平台我的应用,可以直接去下载后私有化部署且完全免费。开源不易,望多多支持,也可通过平台提出宝贵意见,感谢!

相关推荐
Carlos_sam18 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85029 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏1 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架