touch-action:auto
时间: 2023-10-31 07:42:06 浏览: 43
`touch-action: auto` 是一个CSS属性,用于指定在触摸设备上如何处理触摸事件。当设置为 `auto` 时,浏览器会根据元素的默认行为和手势进行处理。它允许浏览器根据需要进行滚动、缩放或其他手势操作,以提供更流畅的用户体验。这对于具有可拖动元素(如滑块)的视频进度条来说是很有用的,因为它允许用户在移动设备上自然地拖动滑块来改变进度。
相关问题
antd源码分析之——标签页(tabs 3.Tabs的滚动效果)
在Antd的Tabs组件中,当标签页数量过多时,会自动出现滚动条,使用户可以通过滚动来查看所有标签页。下面我们就来分析一下Antd是如何实现这个滚动效果的。
## 实现原理
Antd中Tabs的滚动效果是通过设置`overflow-x: auto`来实现的,当标签页数量超过一定数量时,Tabs容器的宽度会缩小,出现水平滚动条。
具体实现代码如下:
```css
.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容器的宽度,并根据实际情况进行优化。
el的左键手势如何关闭
如果您想要关闭el的左键手势,您可以在el-select组件中添加`popper-class`属性,并在该属性中添加一个自定义的class,然后在CSS中将该class的`touch-action`属性设置为`auto`。具体代码如下:
```html
<el-select v-model="value" popper-class="my-popper-class">
<!-- options go here -->
</el-select>
```
```css
.my-popper-class {
touch-action: auto;
}
```
这将覆盖el-select组件默认的`touch-action`属性,从而禁用左键手势。