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(208, 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>