用css写一个水平滑动
时间: 2024-05-08 13:15:16 浏览: 15
可以使用CSS属性`scroll-snap-type`和`scroll-snap-align`来实现水平滑动效果。
首先,需要在HTML中创建一个包含多个子元素的容器,并设置容器的宽度和高度,以及`overflow-x: scroll`属性来使容器可滚动。
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
```
然后,在CSS中设置容器的`scroll-snap-type`属性为`x mandatory`,表示容器只能水平滚动。同时,设置子元素的`scroll-snap-align`属性为`start`,表示子元素对齐容器的左侧边缘。
```css
.container {
width: 100%;
height: 200px;
overflow-x: scroll;
scroll-snap-type: x mandatory; /* 设置容器只能水平滚动 */
}
.item {
width: 200px;
height: 200px;
scroll-snap-align: start; /* 设置子元素对齐容器的左侧边缘 */
background-color: #ccc;
display: inline-block;
margin-right: 10px;
}
```
这样就可以实现水平滑动的效果了。完整代码如下:
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<style>
.container {
width: 100%;
height: 200px;
overflow-x: scroll;
scroll-snap-type: x mandatory; /* 设置容器只能水平滚动 */
}
.item {
width: 200px;
height: 200px;
scroll-snap-align: start; /* 设置子元素对齐容器的左侧边缘 */
background-color: #ccc;
display: inline-block;
margin-right: 10px;
}
</style>
```