vue原生满屏滚动方式

目录

• vue原生满屏滚动
• 效果图
• 代码
• 总结

<template>
  <div class='page-sum'>
    <div class='distance'>
      <!--      左侧导航栏-->
      <div class='page-nav'>
        <div>
          <div @click='scrollByIndex(0)' class='nav-type'>
            <p :style="navIndex===0?'color:#00D2C7':''">企业主页</p>
          </div>
          <div @click='scrollByIndex(4)' class='nav-type'>
            <p :style="navIndex===1?'color:#00D2C7':''">案例中心</p>
          </div>
          <div @click='scrollByIndex(5)' class='nav-type'>
            <p :style="navIndex===2?'color:#00D2C7':''">方案中心</p>
          </div>
          <div @click='scrollByIndex(7)' class='nav-type'>
            <p :style="navIndex===3?'color:#00D2C7':''">咨讯库</p>
          </div>
          <div @click='scrollByIndex(9)' class='nav-type'>
            <p :style="navIndex===4?'color:#00D2C7':''">文档库</p>
          </div>
        </div>
      </div>
      <div class='page-box'>
        <div class='page-one' style='background: #5daf34'>
          第一页
        </div>
        <div class='page-two' style='background: #1b8bff'>
          第二页
        </div>
 
        <div class='page-three' style='background: #00a2d4'>
          第三页11
        </div>
        <div class='page-four' style='background: #fab6b6'>
          第三页22
        </div>
 
        <div class='page-five' style='background: #00DECB'>
          第四页
        </div>
 
        <div class='page-six' style='background: #00D2C7'>
          第五页11
        </div>
 
        <div class='page-seven' style='background: #2D64B3'>
          第五页22
        </div>
        <div class='page-eight' style='background: #fab6b6'>
          第六页11
        </div>
 
        <div class='page-nine' style='background: #00DECB'>
          第六页22
        </div>
 
        <div class='page-ten' style='background: #00b7ee'>
          第七页
        </div>
 
      </div>
    </div>
  </div>
</template>

<script>
 
export default {
  name: 'index',
  data() {
    return {
      navIndex: 0,
      wheel: 0,
      style: ''
    }
  },
  mounted() {
    this.initWheel()  //整屏移动
  },
  watch: {
    wheel: {
      handler(val) {
      }
    }
  },
  methods: {
    initWheel() {
      this.wheel = 0   //  0 到 10
      let timer = 1500
      let agent = navigator.userAgent.toLowerCase()
      let isMac = /macintosh|mac os x/i.test(navigator.userAgent)
      if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0 || agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
        timer = 1000
      }
      if (isMac) {
        timer = 1500
      }
      window.addEventListener('wheel', this.throttle(this.wheelHandler, timer))  //兼容mac的方法  1500  timer  windows  为1000  mac为1500
    },
    throttle(func, delay) {
      let prev = Date.now()
      return function() {
        let context = this
        let args = arguments
        let now = Date.now()
        if (now - prev >= delay) {
          func.apply(context, args)
          prev = Date.now()
        }
      }
    },
    wheelHandler(e) {
      let main = document.querySelector('.page-box')
      let headHeight = document.querySelector('.page-one').clientHeight
      if (e.deltaY > 0) {
        if (this.wheel === 9) return
        this.wheel++
      } else {
        if (this.wheel === 0) return
        this.wheel--
      }
      if (this.wheel === 0) {
        main.style.transform = `translateY(0)` //整屏上下移
      } else {
        main.style.transform = `translateY(calc(-${headHeight}px - ${(this.wheel - 1) * 100}vh)` //整屏上下移
      }
 
      // 划分左侧导航栏内有几屏
      if (this.wheel >= 0 && this.wheel < 4) { // 0 4 6 8
        this.navIndex = 0
      } else if (this.wheel >= 4 && this.wheel < 5) {
        this.navIndex = 1
      } else if (this.wheel >= 5 && this.wheel < 7) {
        this.navIndex = 2
      } else if (this.wheel < 9) {
        this.navIndex = 3
      } else if (this.wheel === 9) {
        this.navIndex = 4
      }
    },
    scrollByIndex(index) {
      let e = {
        deltaY: 100
      }
      this.wheel = index - 1
      this.wheelHandler(e)
    }
  }
}
</script>
 

<style lang='scss' scoped>
.page-sum {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
 
.distance {
  width: 75rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
 
.page-box {
  width: 65.625rem;
  transform: translateY(0);
  transition: 1s;
}
 
.page-one {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
 
.page-two {
  height: 100vh;
}
 
.page-three, .page-four {
  height: 100vh;
}
 
.page-five {
  height: 100vh;
}
 
.page-six {
  height: 100vh;
}
 
.page-seven {
  height: 100vh;
}
 
.page-eight {
  background: #fff;
  height: 100vh;
}
 
.page-nine {
  width: 100%;
  height: 100vh;
}
 
.page-ten {
  height: 100vh;
}
 
.page-nav {
  transform: translateY(50%);
  width: 8rem;
  height: 22rem;
  text-align: center;
  border-radius: 0.125rem;
  background: #FFF;
  box-shadow: 2px 1px 8px 1px rgba(null, 208, 208, 0.16);
}
 
.nav-type {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  line-height: 3rem;
  color: #323232;
}
 
//滚动条的宽度
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
 
}
 
//滚动条的设置
::-webkit-scrollbar-thumb {
  background-color: #ddd;
  background-clip: padding-box;
  min-height: 1.75rem;
}
</style>