控制鼠标滚轮滚动指定的距离
滚动整屏内容
鼠标滚轮事件控制需要滚动区域的 top ,滚轮每滚动一次,top移动的值是屏幕的高度,设置body的overflow:hidden
<template>
<div id="fome">
<!-- banner区域 -->
<nav class="banner">
<video
class="nav-video"
src="@/assets/video/earth.mp4"
autoplay
loop
muted
></video>
<!-- 文字 -->
<div class="ban-word">
<img src="@/assets/images/banner-word.png" alt="" />
</div>
</nav>
<!-- 服务平台 -->
<section class="pro-plat">
<h1 class="title">便捷的端与边缘AI服务平台</h1>
<section class="pro-con">
<article class="pro-son1">
<div class="son-title1">支持多来源模型</div>
<div class="son-con son-con1">
<div class="son1-top">
<div class="son1-left">
<p class="left-p1">上传本地模型</p>
<p>支持多种深度学习框架和网络模型</p>
</div>
<div class="son1-right"></div>
</div>
<div class="son1-top">
<div class="son1-left">
<p class="left-p1">使用开源模型</p>
<p>直接扫描体验Github丰富的开源模型</p>
</div>
<div class="son1-right"></div>
</div>
</div>
</article>
<article class="pro-son2">
<div class="son-title1">零门槛AI芯片</div>
<div class="son-con"></div>
</article>
<article class="pro-son3">
<div class="son-title1">本地部署</div>
<div class="son-con"></div>
</article>
</section>
</section>
<!-- 核心优势 -->
<section style="height:100%;background:pink;"></section>
<!-- 底部 -->
<section style="height:220px;background:black;"></section>
</div>
</template>
<script>
export default {
name: "",
mounted() {
var x = 0;
function debounce(handler, delay) {
var timer;
return function() {
var self = this,
arg = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
handler.apply(self, arg);
}, delay);
};
}
// 处理函数
// function handle() {
// console.log(Math.random());
// }
// 滚动事件
// window.addEventListener("scroll", debounce(handle, 1000));
var scrollFunc = function(e) {
e = e || window.event;
// console.log("e", e);
var fome = document.getElementById("fome");
fome.style.height = document.body.clientHeight + "px";
var changeHeight = document.body.clientHeight;
console.log("changeHeight", changeHeight);
if (e.wheelDelta) {
if (e.wheelDelta > 0) {
if (x <= -changeHeight * 2 - 1) {
x = -changeHeight * 2;
fome.style.top = `${-changeHeight * 2 + "px"}`;
} else if (-changeHeight > x && x >= -changeHeight * 2) {
console.log("x------", x);
x = -changeHeight;
fome.style.top = `${-changeHeight + "px"}`;
} else if (x >= -changeHeight) {
x = 0;
fome.style.top = "0px";
return;
}
console.log("fome", fome);
fome.style.top += `${x + "px"}`;
}
if (e.wheelDelta < 0) {
// 正确的指定距离的
// if (x <= -2000) {
// x = -2234;
// fome.style.top = " -2234px";
// return;
// } else {
// x += -1007;
// }
if (x <= -changeHeight * 2 + 200) {
x = -changeHeight * 2 - 200;
fome.style.top = `${-changeHeight * 2 - 200 + "px"}`;
// fome.style.top = " -2234px";
return;
} else {
x += -changeHeight;
}
console.log("x往下滚动", x);
fome.style.top = `${x + "px"}`;
//当滑轮向下滚动时
console.log("下滚", document.body.clientHeight);
}
} else if (e.detail) {
//Firefox滑轮事件
if (e.detail > 0) {
//当滑轮向下滚动时
console.log("下滚");
}
if (e.detail < 0) {
//当滑轮向上滚动时
console.log("上滚");
}
}
};
/*IE、Opera注册事件*/
if (document.attachEvent) {
document.attachEvent("onmousewheel", scrollFunc);
}
//Firefox使用addEventListener添加n滚轮事件
if (document.addEventListener) {
//firefox
document.addEventListener("DOMMouseScroll", scrollFunc, false);
}
//Safari与Chrome属于同一类型
// window.onmousewheel = document.onmousewheel = scrollFunc;
window.addEventListener("mousewheel", debounce(scrollFunc, 200), false);
/*
event.wheelDelta 滚动方向
上:120
下:-120
Firefox:event.detail 滚动方向
上:-3
下:3
*/
},
};
</script>
<style scoped>
#fome {
position: relative;
top: 0;
transition: all 0.5s;
}
.banner {
position: relative;
/* width: 100%; */
height: 100vh;
overflow: hidden;
}
.nav-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */
/* width: 100%; */
/* height: 100%; */
/* height: 100vh; */
/* height: 760px; */
object-fit: fill;
}
.ban-word {
position: absolute;
top: 40%;
left: 40%;
transform: translate(-50%, -50%);
z-index: 99999;
}
/* 产品与服务 */
.pro-plat {
/* padding-top: 136px; */
box-sizing: border-box;
/* height: 735px; */
height: 100vh;
}
.pro-plat .title {
height: 100px;
line-height: 100px;
text-align: center;
font-size: 40px;
/* margin-bottom: 60px; */
}
.pro-plat .pro-con {
display: flex;
justify-content: space-between;
/* height: 504px; */
}
.pro-son1,
.pro-son3 {
width: 25%;
}
.pro-son2 {
width: 40%;
}
.son-title1 {
background: #d35201;
color: #fff;
height: 70px;
line-height: 70px;
text-align: center;
font-size: 28px;
margin-bottom: 38px;
}
.son-con {
height: 100%;
padding: 36px 26px;
box-sizing: border-box;
background: #f4f4f4;
}
.son-con1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.son1-top {
width: 100%;
height: 132px;
background: #fff;
}
.son-con1 .son1-left {
width: 170px;
font-size: 20px;
margin-left: 30px;
}
.left-p1 {
height: 60px;
line-height: 60px;
}
</style>