展示（水平滑动）
请在移动端模式下体验本页面。
请在移动端模式下体验本页面。
代码
CSS代码：
.list-ul {
width: 375px; height: 667px;
margin: auto;
font-size: 0;
scroll-snap-type: x mandatory;
white-space: nowrap;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.list-li {
display: inline-block;
width: 100%; height: 100%;
scroll-snap-align: center;
position: relative;
transition: filter .3s;
}
.list-li:not(.active) {
filter: grayscale(1);
}
.list-img {
display: block;
width: 80%; height: 100%;
margin: auto;
object-fit: contain;
object-position: center;
}
HTML代码：
<div id="listX" class="list-ul">
<div class="list-li active">
<img class="list-img" src="./student.svg">
</div>
<div class="list-li">
<img class="list-img" src="./student.svg" style="filter: hue-rotate(45deg);">
</div>
<div class="list-li">
<img class="list-img" src="./student.svg" style="filter: hue-rotate(135deg);">
</div>
<div class="list-li">
<img class="list-img" src="./student.svg" style="filter: hue-rotate(225deg);">
</div>
</div>
JS代码：
// 滚动容器
var eleListX = document.querySelector('#listX');
// 定时器，用来检测滚动是否结束
var timerScrollEndDetect = null;
// 滚动事件开始
eleListX.addEventListener('scroll', function () {
clearTimeout(timerScrollEndDetect);
timerScrollEndDetect = setTimeout(function () {
// 100毫秒内滚动事件没触发，认为停止滚动了
// 对列表元素进行位置检测
[].slice.call(eleListX.children).forEach(function (eleList, index) {
if (Math.abs(eleList.getBoundingClientRect().left - eleListX.getBoundingClientRect().left) < 10) {
// 添加标志类名
eleList.classList.add('active');
// 提示
result.innerHTML = '滚动结束，当前显示的是第'+ (index + 1) +'个列表。';
} else {
eleList.classList.remove('active');
}
});
}, 100);
// 提示
result.innerHTML = '滚动中...';
});