h5中鼠标滚动每次滚动一整屏页面

我爱画页面

于 2024-07-25 18:09:18 发布

阅读量107

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qdm13209211861/article/details/140696660

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Page Scroll with Footer and Navigation</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }

    .section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    #footer {
      height: 300px;
      background: #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .page {
      transition: transform 0.5s ease;
      position: relative;
    }

    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      background: #333;
      color: white;
      padding: 10px;
      display: flex;
      justify-content: center;
      z-index: 1000;
    }

    .navbar ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    .navbar li {
      margin: 0 15px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="navbar">
    <ul>
      <li class="halfmenu_item_empty"></li>
      <li class="halfmenu_item">
        <span class="menu-item-span" onclick="scrollToSection(0)">首页</span>
      </li>
      <li class="halfmenu_item">
        <span class="menu-item-span" onclick="scrollToSection(1)">照片修复</span>
      </li>
      <li class="halfmenu_item">
        <span class="menu-item-span" onclick="scrollToSection(2)">网图修复</span>
      </li>
      <li class="halfmenu_item">
        <span class="menu-item-span" onclick="scrollToSection(3)">折痕修复</span>
      </li>
    </ul>
  </div>

  <div class="page">
    <div class="section" style="background: #ff6f61;">Page 1</div>
    <div class="section" style="background: #6b5b95;">Page 2</div>
    <div class="section" style="background: #88b04b;">Page 3</div>
    <div class="section" style="background: #f7cac9;">Page 4</div>
    <div id="footer">Footer</div>
  </div>

  <script>
    let currentSection = 0;
    const sections = document.querySelectorAll('.section');
    const footer = document.getElementById('footer');
    const totalSections = sections.length;
    let isScrolling = false; // 用于节流控制

    window.addEventListener('wheel', (event) => {
      if (isScrolling) return;
      isScrolling = true;

      if (event.deltaY > 0) {
        if (currentSection < totalSections) {
          currentSection++;
        }
      } else {
        if (currentSection > 0) {
          currentSection--;
        }
      }
      scrollToSection(currentSection);

      setTimeout(() => {
        isScrolling = false;
      }, 500); // 滚动动画时间
    });

    window.addEventListener('touchstart', handleTouchStart, false);
    window.addEventListener('touchmove', handleTouchMove, false);

    let xDown = null;
    let yDown = null;

    function handleTouchStart(evt) {
      const firstTouch = evt.touches[0];
      xDown = firstTouch.clientX;
      yDown = firstTouch.clientY;
    };

    function handleTouchMove(evt) {
      if (!xDown || !yDown || isScrolling) {
        return;
      }
      isScrolling = true;

      const xUp = evt.touches[0].clientX;
      const yUp = evt.touches[0].clientY;

      const xDiff = xDown - xUp;
      const yDiff = yDown - yUp;

      if (Math.abs(xDiff) > Math.abs(yDiff)) {
        /* most significant */
        if (xDiff > 0) {
          /* left swipe */
        } else {
          /* right swipe */
        }
      } else {
        if (yDiff > 0) {
          /* up swipe */
          if (currentSection < totalSections) {
            currentSection++;
          }
        } else {
          /* down swipe */
          if (currentSection > 0) {
            currentSection--;
          }
        }
      }
      scrollToSection(currentSection);

      setTimeout(() => {
        isScrolling = false;
      }, 500); // 滚动动画时间

      /* reset values */
      xDown = null;
      yDown = null;
    };

    function scrollToSection(sectionIndex) {
      currentSection = sectionIndex;
      if (currentSection < totalSections) {
        document.querySelector('.page').style.transform = `translateY(-${currentSection * 100}vh)`;
      } else {
        const footerHeight = footer.offsetHeight;
        const offset = (totalSections - 1) * 100 + (footerHeight / window.innerHeight * 100);
        document.querySelector('.page').style.transform = `translateY(-${offset}vh)`;
      }
    }
  </script>
</body>

</html>