横向滚动展示内容

明日月初

已于 2024-03-23 21:11:06 修改

阅读量562

点赞数 18

文章标签： javascript 前端 css

于 2024-03-23 20:46:55 首次发布

本文链接：https://blog.csdn.net/qweasl_/article/details/136974937

版权

从蔚蓝档案中得到灵感，与好友博丽七七，一起做了个简易版的

<!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>