antd源码分析之——标签页（tabs 3.Tabs的滚动效果）

在Antd的Tabs组件中，当标签页数量过多时，会自动出现滚动条，使用户可以通过滚动来查看所有标签页。下面我们就来分析一下Antd是如何实现这个滚动效果的。

## 实现原理

Antd中Tabs的滚动效果是通过设置`overflow-x: auto`来实现的，当标签页数量超过一定数量时，Tabs容器的宽度会缩小，出现水平滚动条。

具体实现代码如下：

.ant-tabs-bar {
  position: relative;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  .ant-tabs-nav-container {
    height: 100%;
    display: inline-flex;
    align-items: stretch;
  }
}

从上面的代码中可以看出，Antd将Tabs容器的`overflow-x`属性设置为auto，这样当标签页数量过多时，会自动出现水平滚动条；同时还设置了一些其他属性，比如`white-space: nowrap`来防止标签页换行，`-webkit-overflow-scrolling: touch`来优化iOS设备的滚动体验等。

## 注意事项

使用Antd的Tabs组件时，需要注意以下几点：

1. 需要设置Tabs容器的宽度，否则滚动条不会出现；
2. 如果标签页数量较少，Tabs容器的宽度会很大，导致页面布局不美观，需要进行调整；
3. 当标签页数量很多时，滚动体验可能会受到影响，需要根据实际情况进行优化。

## 总结

Antd的Tabs组件通过设置`overflow-x: auto`来实现标签页滚动效果，同时还设置了一些其他属性来优化用户体验。在使用该组件时，需要注意设置Tabs容器的宽度，并根据实际情况进行优化。