从蔚蓝档案中得到灵感，与好友 博丽七七 ，一起做了个简易版的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.scroll-container {
overflow: hidden;
height: 100vh; /* 设置容器高度，使其占满整个视口 */
}
.content {
width: 200%; /* 设置内容的宽度为容器的两倍，以便内容可以自右向左滚动 */
white-space: nowrap; /* 防止内容换行 */
display: flex;
}
/* 动画过渡效果 */
.content {
transition: transform 0.5s ease; //用于控制左右运动的速度
}
.content.scroll {
transform: translateX(-50%); /* 将内容向左平移50%的宽度 */
}
.a{
width: 20rem;
height: 20rem;
margin-left: 10rem;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="content">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
</body>
<script>
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.content');
let a=0
//wheel 为鼠标滚动事件
container.addEventListener('wheel', function(event) {
if (event.deltaY > 0) { //event.deltaY 用于判断滚轮滚动的方向 ， 向下则大于0
a -= 20;
content.style.transform = `translateX(${a}rem)`;
} else if (event.deltaY < 0) {
a += 20;
content.style.transform = `translateX(${a}rem)`;
}
});
</script>
</html>以上即可实现功能，若需改善则需用到防抖函数，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body::-webkit-scrollbar {
display: none;
}
.scroll-container {
overflow: hidden;
height: 100vh; /* 设置容器高度，使其占满整个视口 */
width: 100%;
}
.content {
display: flex;
width: 800%; /* 设置内容的宽度为容器的多倍，以便内容可以自右向左滚动，具体看你每个元素的宽度 */
white-space: nowrap; /* 防止内容换行 */
transform: translatex(3rem);
}
/* 动画过渡效果 */
.content {
transition: transform 1s ease;
}
/* .content.scroll {
transform: translateX(-20rem); /* 将内容向左平移50%的宽度
} */
.a{
width: 20rem;
height: 20rem;
margin-left: 10rem;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="scroll-container">
<div class="content">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</div>
<script>
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.content');
let a = 0;
function debonce(delay){
let time;
return ()=>{}
time = setTimeout(()=>{
clearTimeout(time)
},delay)
}
let time; // 共享的定时器变量
container.addEventListener('wheel', function(event) {
console.log(event);
clearTimeout(time); // 清除上一次的定时器
// 防抖函数 ，防止因单次滚动跨度太大而使得偏移太大
time = setTimeout(() => {
if (event.deltaY > 0) {
a -= 20;
content.style.transform = `translateX(${a}rem)`;
} else if (event.deltaY < 0) {
a += 20;
content.style.transform = `translateX(${a}rem)`;
}
}, 100);
});
</script>
</body>
</html>
