.box {
width: 440px;
white-space: nowrap;
overflow: auto;
scroll-snap-type: x mandatory;
}
.box img {
scroll-snap-align: start;
}
从以上代码,已经可以:当滑动滚动条时,滑到下一张图片的一丢丢,就会平滑定位到下一张图片了
scroll-snap-type
作用就是确定是水平滚动定位,还是垂直滚动定位。
none 默认值。表示滚动时候忽略捕捉点,也就是我们平时使用的滚动。
x 捕捉水平定位点。
y 捕捉垂直平定位点。
block 捕捉和块状元素排列一个滚动方向的定位点。默认文档流下指的就是垂直轴。
inline 捕捉和内联元素排列一个滚动方向的定位点。默认文档流下指的就是水平轴。
both 横轴纵轴都捕捉。
mandatory 表示“强制”,可选参数。强制定位,无论是添加删除元素,或者滚动窗口较小,不足以放下子元素。
proximity proximity表示“大约”,可选参数。可能会定位。这个值的作用表现比较玄乎,时间有限,我也没有弄透。大家可以对比下面这个demo,感受和mandatory属性值的不同。
scroll-snap-align
作用在滚动容器子元素上的,表示捕获点是上边缘,下边缘,还是中间位置。
none 默认值。不定义位置。
start 起始位置对齐,例如,垂直滚动,子元素和容器同上边缘对齐。
end 结束位置对齐,例如,垂直滚动,子元素和容器同下边缘对齐。
center 居中对齐。子元素中心和滚动容器中心一致。
想要个轮播图怎么办???想要有小圆点 不想要滚动条
scroll-behavior 平滑定位到指定元素的指定位置,跳转不会太生硬
不结合js,能想到的就是锚点跳转
.box_wrap {
position: relative;
width: 440px;
}
.box {
width: 440px;
white-space: nowrap;
overflow: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.box img {
scroll-snap-align: start;
}
.circle {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
}
.circle a { /* 小圆点 */
display: inline-block;
width: 14px;
height: 14px;
background-color: red;
border-radius: 50%;
margin: 10px;
}
::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
已经可以切换和滚动了
剩下的按钮颜色需要配合js,今天的快乐就止于此吧