css滑动动画

最新推荐文章于 2024-08-05 14:55:17 发布

单调的王先森

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量795

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_51198863/article/details/114686921

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #wrap {
        width: 100%;
        position: relative;
        top: 0;
        transition: all 1s ease;
      }
      #wrap div {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .page {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      #page1 {
        background: lightpink no-repeat center/cover;
      }
      #page2 {
        background: #6ce26c;
      }
      #page3 {
        background: #bf4938;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="page1" class="page">page1</div>
      <div id="page2" class="page">page2</div>
      <div id="page3" class="page">page3</div>
    </div>
    <script>
      // 获取可视高
      let wrap = document.getElementById("wrap")
      wrap.style.height = document.documentElement.clientHeight + "px"

      //   移动端触摸屏幕
      document.addEventListener("touchstart", (e) => {
        //刚触摸屏幕时的位置
        let startY = e.touches[0].pageY
        //手指离开屏幕
        document.addEventListener("touchend", (event) => {
          let endY = event.changedTouches[0].pageY
          if (endY - startY < 10) {
            // 手指向上滑动，对应页面向下滚动
            goDown()
          } else {
            // 手指向下滑动，对应页面向上滚动
            goUp()
          }
        })
      })

      let num = 0
      function scrollMouse(event) {
        let e = event || window.event
        // console.log(event.wheelDelta)
        if (e.wheelDelta > 0) {
          //当滑轮向上滚动时
          goUp()
        } else {
          goDown()
        }
      }
      // 向下滚动
      function goDown() {
        num++
        if (num >= 2) {
          num = 2
        }
        wrap.style.top = -num * document.documentElement.clientHeight + "px"
      }
      // 向上滚动
      function goUp() {
        num--
        if (num <= 0) {
          num = 0
        }
        wrap.style.top = -num * document.documentElement.clientHeight + "px"
      }
      // 时间戳方案
      function throttle(fn, wait) {
        var pre = Date.now()
        return function () {
          var context = this
          var args = arguments
          var now = Date.now()
          if (now - pre >= wait) {
            fn.apply(context, args)
            pre = Date.now()
          }
        }
      }

      window.addEventListener("mousewheel", scrollMouse)
      // window.addEventListener("mousewheel", throttle(scrollMouse, 1000))
      // window.addEventListener("touchend", throttle(scrollMouse, 1000))
    </script>
  </body>
</html>