目前市面上有些官网首页采用的是轮播式的。也就是每一块内容都是占满全屏的，滚动鼠标滚轮，就像切换轮播图一样切换下一章内容于是萌生了自己也实现一个这样的网站的想法
最开始想到了使用轮播插件，后来发现没有完美适合的插件，所以最终还是决定手动实现
以下是实现方案（jq实现，框架实现步骤基本差不多。稍微改动即可，理解了思路就行）
首先分析一下，这个效果是如何实现的。
1.监听鼠标的滚轮事件
2.整体的切换效果参考轮播图，就是一个大盒子里放上所有的内容，但是可视区域保证只有一张内容。通过位移来实现轮播的效果
3.上述两点就是大致的思路，剩下的就是一些适配上的问题。因为我们的页面是占满全屏的，所以把适配重点放在高度的适配上。这里我选择了监听浏览器可视高度的变化，动态给每个盒子赋值当前的可视区域高度
html 大概长这样
<div class="content" id="content">
<div class="content_item"></div>
<div class="content_item"></div>
<div class="content_item"></div>
<div class="content_item"></div>
<div class="content_item"></div>
</div>
每一个content_item就代表了一张全屏。
接下来是css
html {
height: 100%;
overflow-y: hidden;
}
.content_item {
width: 100%;
}
就是这么简单，一个可滚动的盒子就做好了。至于content_item 为什么不给高度，
因为我们需要动态的给他可视区域的高度
js
先上监听鼠标滚轮事件的代码
(function windowAddMouseWheel() {
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
i--
console.log("滑轮向上滚动,当前索引" + i)
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
i++;
console.log("滑轮向下滚动,当前索引" + i)
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail < 0) { //当滑轮向上滚动时
i--;
console.log("滑轮向上滚动,当前索引" + i)
}
if (e.detail > 0) { //当滑轮向下滚动时
i++;
console.log("滑轮向下滚动,当前索引" + i)
}
}
};
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
})()
因为各大浏览器的事件有点不太一样，所以上面代码里做了一下判断
有了监听滚轮事件的代码，那实现我们的需求就很简单了
let i = 1;//当前索引
let scrollOk = true //节流控制器
let innerHeight = window.innerHeight //浏览器可视高度
initsetDomHeight()
//监听浏览器高度变化
$(window).resize(function () {
changePageHeight(); //调用方法
});
setContentAnmtion函数就是用来设置轮播动画的，每次滚动滚轮都要调用一次这个方法，来实现轮播的效果
//设置轮播动画
function setContentAnmtion() {
$('#content').css({
'transform': `translate3d(0px, -${innerHeight * (i - 1)}px, 0px)`,
'height': '100%',
'position': 'relative',
'touch-action': 'none',
'transition': 'all 700ms ease 0s'
})
}
监听高度变化的函数
//监听高度设置元素高度
function changePageHeight() {
if (i == 7) {
return
}
innerHeight = window.innerHeight
initsetDomHeight()
}
设置元素的高度
//设置元素高度
function initsetDomHeight() {
console.log(innerHeight, '设置')
$('.content_item').css('height', innerHeight)
setContentAnmtion()
}
上述代码都是在滚轮监听事件里调用的，因为怕写在一起太过冗余，所以我给抽成了一个个函数。
索引i的作用就是用来计算当前需要偏移的数值，偏移量=当前索引*当前可视区域高度。
scrollOk 是我用来控制滚轮的滚动次数的，因为不想做成无限滚动的样子，我想实现的是滚动一次之后最少延迟1秒才能再滚到下一章。如果不需要的可以无视。
最后上一篇完整可运行的demo
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<script src='https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
.content {
}
html {
height: 100%;
overflow-y: hidden;
}
.content_item {
width: 100%;
position: relative;
}
.content_item:nth-child(1) {
background: #159b76;
}
.content_item:nth-child(2) {
background: yellow;
}
.content_item:nth-child(3) {
background: pink;
}
.content_item:nth-child(4) {
background: aqua;
}
.content_item:nth-child(5) {
background: rosybrown;
}
</style>
</head>
<body>
<div class='content' id='content'>
<div class='content_item'></div>
<div class='content_item'></div>
<div class='content_item'></div>
<div class='content_item'></div>
<div class='content_item'></div>
</div>
</body>
<script>
//取消谷歌浏览器记录上一次浏览位置
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
let i = 1;//当前索引
let scrollOk = true //节流控制器
let innerHeight = window.innerHeight //浏览器可视高度
initsetDomHeight()
//监听浏览器高度变化
$(window).resize(function () {
changePageHeight(); //调用方法
});
(function windowAddMouseWheel() {
var scrollFunc = function (e) {
if (!scrollOk) {
return
}
scrollOk = false
setTimeout(() => {
scrollOk = true
}, 500)
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
if (i == 1) {
return;
}
i--
setContentAnmtion()
console.log("滑轮向上滚动,当前索引" + i)
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
if (i == 5) {
return;
}
i++;
setContentAnmtion()
console.log("滑轮向下滚动,当前索引" + i)
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail < 0) { //当滑轮向上滚动时
if (i == 1) {
return;
}
i--;
setContentAnmtion()
console.log("滑轮向上滚动,当前索引" + i)
}
if (e.detail > 0) { //当滑轮向下滚动时
if (i == 5) {
return;
}
i++;
setContentAnmtion()
console.log("滑轮向下滚动,当前索引" + i)
}
}
};
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
})()
//设置轮播动画
function setContentAnmtion() {
$('#content').css({
'transform': `translate3d(0px, -${innerHeight * (i - 1)}px, 0px)`,
'height': '100%',
'position': 'relative',
'touch-action': 'none',
'transition': 'all 700ms ease 0s'
})
}
//监听高度设置元素高度
function changePageHeight() {
if (i == 7) {
return
}
innerHeight = window.innerHeight
initsetDomHeight()
}
//设置元素高度
function initsetDomHeight() {
console.log(innerHeight, '设置')
$('.content_item').css('height', innerHeight)
setContentAnmtion()
}
</script>
</html>
网友评论