html鼠标滚动实现页面切换,实现鼠标滚动一下页面就上下翻一页的效果

Document

*{

margin: 0;

padding: 0;

}

html,body{

width: 100%;

height: 100%;

}

.page{

height: 100%;

width: 100%;

font-size: 126px;

display: -webkit-box; /*Safari*/

display: -moz-box; /*Firefox*/

display: -ms-flexbox; /*IE*/

display: -webkit-flex; /*Chrome*/

display: flex;

-webkit-box-align: center;

-moz-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

-moz-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

#mao{

position: fixed;

right: 0;

bottom: 0;

}

Prat 1

Prat 2

Prat 3

Prat 4

Prat 5

Prat 6

Prat 7

//var oldy = 0,tem = 0,fullheight = document.body.clientHeight;

//window.onscroll = function() {

//var y = document.documentElement.scrollTop || document.body.scrollTop;

//console.log('this is y' + y);

//if (y > oldy) {

//location.href = '#item-4';

//console.log('向下翻');

//oldy = y;

//} else if (y < oldy) {

document.body.scrollTop-=fullheight;console.log('向上翻');oldy=y;

//} else {

//console.log('翻你妹啊');

//console.log('xiangdeng');

//}

//

//console.log('this is oldy' + oldy);

//}

var scrollFunc = function(e) {

ee = e || window.event;

var t1 = document.getElementById("wheelDelta");

var t2 = document.getElementById("detail");

var y = document.documentElement.scrollTop || document.body.scrollTop;

var fullheight = document.body.offsetHeight;

if (e.wheelDelta) { //IE/Opera/Chrome

var a = e.wheelDelta;//向上为120，向下为-120

if(a>0){//向上

document.body.scrollTop -= fullheight/2;

}

if(a<0){//向下

document.body.scrollTop += fullheight/2;

}

} else if (e.detail) { //Firefox

var a = e.detail;//向上为-3，向下为3

if(a<0){//向上

document.documentElement.scrollTop -= fullheight/2;

}

if(a>0){//向下

document.documentElement.scrollTop += fullheight/2;

}

}

}

/*注册事件*/

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollFunc, false);

} //W3C

window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome

源码如上。

一开始希望window.onscroll = function() {}的方法来实时检测滚动栏是否有变化。也实现了翻页的功能，但是直接就是一翻到底。。。也就是因为在实现翻页的时候由于document.body.scrollTop的变化，会自动触发新的window.onscroll函数。所以无奈只能求助百度，最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试，最新版chrome和firefox是支持的。希望自己可以慢慢学习，每天练习。if (document.addEventListener) {document.addEventListener('DOMMouseScroll', scrollFunc, false);} //W3Cwindow.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome事件监听的兼容写法最后一个需要注意的地方是获取当前页面顶端到body顶端的距离(比如你在第三页距离文档头部的距离为两个屏幕的高度)，要这样写var y=document.documentElement.scrollTop || document.body.scrollTop;谷歌中document.documentElement.scrollTop怎么搞都是0，需要用bodywindow.event.wheelDelta非firefox浏览器获取到滚动条变化的情况，以谷歌为例。

而且上述代码的关键在于其中firex和其他浏览器的效果不同

document.body.scrollTop的变化，会自动触发新的window.onscroll函数。所以无奈只能求助百度，最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试，最新版chrome和firefox是支持的。

如果向上滚动鼠标滚轮，则window.event.wheelDelta为120，向下则为-120.

火狐则是window.event.detail代表鼠标滚轮运动情况，且向上滚动window.event.detail的值为-3，向下为3.这是区别的地方

文档也是乱乱的，最终效果也有点不理想。滚动起来不平滑，但是不用jquery的情况下写动画还是不会写。留待以后回过头复习的时候完善。演示地址https://github.com/Fucntion/jseveryday/blob/master/207/207.html

放一个自己最近做的小东西 米单词，公益背单词

document.body.scrollTop的变化，会自动触发新的window.onscroll函数。所以无奈只能求助百度，最后居然让我发现一个绝妙的方法和博客。不过没有做过向下的兼容性测试，最新版chrome和firefox是支持的。