关于浏览器兼容的问题以及字符串编码的一个坑，鼠标滚动事件mousewheel和DOMMouseScroll
2017-03-09 09:31
701 查看
话不多说，附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sp_common.css"/>
<style type="text/css">
body{
background: gray;
overflow: hidden;
}
.wrap-ul li{
width: 100%;
height: 100%;
color: #fff;
font-size: 50px;
text-align: center;
}
.wrap-ul li:first-child{
background: green;
}
.wrap-ul li:nth-child(2){
background: greenyellow;
}
.wrap-ul li:nth-child(3){
background: cyan;
}
.wrap-ul li:last-child{
background: darkslategray;
}
.item-ul{
height: 200px;
width: 50px;
position: fixed;
top: 45%;
right: 5%;
/*background: red;*/
}
.item-ul li{
width: 100%;
height: 25%;
line-height: 40px;
text-align: center;
color: white;
font-size: 18px;
border: 1px solid black;
border-radius: 50%;
margin-top: 2px;
cursor: pointer;
}
.li-active{
background: red;
color: #000000;
}
</style>
</head>
<body>
<ul class="wrap-ul w h">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<ul class="item-ul">
<li class="li-active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('body,html').animate({scrollTop: 0}, 1000);
var index=0;
var scrollHeight=$(window).innerHeight();
$('.item-ul li').click(function(){
index=$(this).index();
console.log(index);
$(this).addClass('li-active').siblings().removeClass('li-active');
$('body,html').animate({scrollTop: scrollHeight*index}, 1000);
/*$('body').scrollTop(1000);*/
});
$(window).resize(function(){
var w=$(window).width();
var h=$(window).height();
$('.wrap-ul li').css({width:w,height:h});
$('body,html').scrollTop(h*index);
});
//以下两个兼容性代码可以做一些合并处理，我就没做了。
//ie（ev.wheelDelta）和chrome（ev.deltaY）滚动事件的兼容
document.body.addEventListener('mousewheel',function(ev){
console.log(ev);
if (ev.deltaY>0 || ev.wheelDelta<0) {
/*console.log('下滚');*/
if(!$(document.body).is(':animated'))moveNext();
} else{
/*console.log('上滚');*/
if(!$(document.body).is(':animated'))movePrev();
}
});
//firefox的滚动事件
document.body.addEventListener('DOMMouseScroll',function(ev){
if (ev.detail>0) {
console.log(3)
if(!$(document.body).is(':animated'))moveNext();
} else{
if(!$(document.body).is(':animated'))movePrev();
}
});
function moveNext(){
/* if(index==0){*/
if(index<3){
$('body,html').animate({scrollTop: scrollHeight*(++index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
/* }*/
}
function movePrev(){
if(index>0){
$('body,html').animate({scrollTop: scrollHeight*(--index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
}
</script>
</body>
</html>
其中的sp_common.css文件内容为：
/***********通用基本类1************/
/*格式化样式*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,button,fieldset,input,textarea,p,blockquote,table,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
header, footer, section, article, aside, nav, address, figure, figcaption, menu, details {display: block;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
a{text-decoration: none;}
a:hover{text-decoration:none;cursor: pointer;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
html{
font-size: 10px;
}
/*.box-main{
overflow: hidden;
}*/
html,body{
height: 100%;
width: 100%;
font-weight: normal;
}
*{
box-sizing: border-box;
}
.w{width:100%}
.h{height:100%}
/*------------ text -------------*/
.tl { text-align:left}
.tc { text-align:center}
.tr { text-align:right}
/*------------ float ------------*/
.fl{float:left;display:inline-block}
.fr{float:right;display:inline-block}
/*------------ clear-float ---------*/
/*.clear{content: ".";display: block;clear: both;}*/
.clear{*zoom:1;}
.clear::after {
content: "";
display: table;
clear: both;
}
.cursor{cursor: pointer;}
.border{border: 1px solid #CCCCCC}
.b-bottom{border-bottom: 1px solid #CCCCCC}
.b-top{border-top: 1px solid #CCCCCC}
.b-right{border-right: 1px solid #CCCCCC}
.b-left{border-left: 1px solid #CCCCCC}
.b-radius{border-radius: 50%}
/*------------ position ------------*/
.pr { position:relative;}
.pa { position:absolute;}
.pf { position: fixed;}
一开始我的html文件是这样命名的：“官网.html” 没错用了汉子。谷歌和火狐都能识别。ie识别不了，把“官网.html”改成 “dddd.html” 只要是英文，ie就打开了。原因就是你既然内容用的是utf-8，那么文件名也要符合utf-8的规范，，，本来想做一个滚轮事件的demo制作，没想到踩这个坑了！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/sp_common.css"/>
<style type="text/css">
body{
background: gray;
overflow: hidden;
}
.wrap-ul li{
width: 100%;
height: 100%;
color: #fff;
font-size: 50px;
text-align: center;
}
.wrap-ul li:first-child{
background: green;
}
.wrap-ul li:nth-child(2){
background: greenyellow;
}
.wrap-ul li:nth-child(3){
background: cyan;
}
.wrap-ul li:last-child{
background: darkslategray;
}
.item-ul{
height: 200px;
width: 50px;
position: fixed;
top: 45%;
right: 5%;
/*background: red;*/
}
.item-ul li{
width: 100%;
height: 25%;
line-height: 40px;
text-align: center;
color: white;
font-size: 18px;
border: 1px solid black;
border-radius: 50%;
margin-top: 2px;
cursor: pointer;
}
.li-active{
background: red;
color: #000000;
}
</style>
</head>
<body>
<ul class="wrap-ul w h">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<ul class="item-ul">
<li class="li-active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('body,html').animate({scrollTop: 0}, 1000);
var index=0;
var scrollHeight=$(window).innerHeight();
$('.item-ul li').click(function(){
index=$(this).index();
console.log(index);
$(this).addClass('li-active').siblings().removeClass('li-active');
$('body,html').animate({scrollTop: scrollHeight*index}, 1000);
/*$('body').scrollTop(1000);*/
});
$(window).resize(function(){
var w=$(window).width();
var h=$(window).height();
$('.wrap-ul li').css({width:w,height:h});
$('body,html').scrollTop(h*index);
});
//以下两个兼容性代码可以做一些合并处理，我就没做了。
//ie（ev.wheelDelta）和chrome（ev.deltaY）滚动事件的兼容
document.body.addEventListener('mousewheel',function(ev){
console.log(ev);
if (ev.deltaY>0 || ev.wheelDelta<0) {
/*console.log('下滚');*/
if(!$(document.body).is(':animated'))moveNext();
} else{
/*console.log('上滚');*/
if(!$(document.body).is(':animated'))movePrev();
}
});
//firefox的滚动事件
document.body.addEventListener('DOMMouseScroll',function(ev){
if (ev.detail>0) {
console.log(3)
if(!$(document.body).is(':animated'))moveNext();
} else{
if(!$(document.body).is(':animated'))movePrev();
}
});
function moveNext(){
/* if(index==0){*/
if(index<3){
$('body,html').animate({scrollTop: scrollHeight*(++index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
/* }*/
}
function movePrev(){
if(index>0){
$('body,html').animate({scrollTop: scrollHeight*(--index)}, 1000);
}
$('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active');
}
</script>
</body>
</html>
其中的sp_common.css文件内容为：
/***********通用基本类1************/
/*格式化样式*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,button,fieldset,input,textarea,p,blockquote,table,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
header, footer, section, article, aside, nav, address, figure, figcaption, menu, details {display: block;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
a{text-decoration: none;}
a:hover{text-decoration:none;cursor: pointer;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
html{
font-size: 10px;
}
/*.box-main{
overflow: hidden;
}*/
html,body{
height: 100%;
width: 100%;
font-weight: normal;
}
*{
box-sizing: border-box;
}
.w{width:100%}
.h{height:100%}
/*------------ text -------------*/
.tl { text-align:left}
.tc { text-align:center}
.tr { text-align:right}
/*------------ float ------------*/
.fl{float:left;display:inline-block}
.fr{float:right;display:inline-block}
/*------------ clear-float ---------*/
/*.clear{content: ".";display: block;clear: both;}*/
.clear{*zoom:1;}
.clear::after {
content: "";
display: table;
clear: both;
}
.cursor{cursor: pointer;}
.border{border: 1px solid #CCCCCC}
.b-bottom{border-bottom: 1px solid #CCCCCC}
.b-top{border-top: 1px solid #CCCCCC}
.b-right{border-right: 1px solid #CCCCCC}
.b-left{border-left: 1px solid #CCCCCC}
.b-radius{border-radius: 50%}
/*------------ position ------------*/
.pr { position:relative;}
.pa { position:absolute;}
.pf { position: fixed;}
一开始我的html文件是这样命名的：“官网.html” 没错用了汉子。谷歌和火狐都能识别。ie识别不了，把“官网.html”改成 “dddd.html” 只要是英文，ie就打开了。原因就是你既然内容用的是utf-8，那么文件名也要符合utf-8的规范，，，本来想做一个滚轮事件的demo制作，没想到踩这个坑了！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DOMMouseScroll，onmousewheel 鼠标滚动事件js
- 鼠标滚动：mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- js鼠标滚轮事件(mousewheel/DOMMouseScroll)
- JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）
- 关于服务器响应，浏览器请求的理解以及javaWeb项目的编码问题
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
- 鼠标滚轮事件（mousewheel、DOMMouseScroll）
- 前端学习（2）：为document的click事件指定一个事件句柄函数（考虑跨浏览器兼容问题）
- 关于NGUI Input Axis Mouse ScrollWheel is not setup. 问题的解决
- 用java写关于删除一个字符串的字符以及删除一个字符串与另一个字符串中相同字符的问题
- JS滚轮事件(mousewheel/DOMMouseScroll)了解
- avascript计算器之DOM事件模型-----浏览器兼容问题
- javascript计算器之DOM事件模型-----浏览器兼容问题
- javascript计算器之DOM事件模型-----浏览器兼容问题
- 兼容各浏览器获取鼠标滚轮上下滚动事件
- 鼠标滑轮事件的差异onmousewheel和DOMMouseScroll
- 鼠标滚轮(mousewheel)和DOMMouseScroll事件 （转载）
- 关于服务器响应，浏览器请求的理解以及javaWeb项目的编码问题
- 关于怎么绑定Jquery 的scroll事件（兼容浏览器）