This article analyzes the compatibility issues that need to be paid attention to in the js scroll event for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div {
width: 300px;
height: 300px;
background: red;
}
</style>
<script>
function addEvent(obj,sEv,fn){
if(){
return (sEv,fn,false);
}else{
return ('on' + sEv,fn);
}
}
function addWheel(obj,fn){
function wheel(ev){
var oEvent = ev || event;
var bDown = true;
bDown = ? > 0: < 0;
fn && fn(bDown);
&& ();
return false;
}
------------------------------------------------------------------
return falseBlock the browser's default behavior，It will be invalid when the event added by the binding is encountered.；
All to use（）；Make a judgment before using this method；
------------------------------------------------------------------
if(('Firefox') !=-1){
('DOMMouseScroll',wheel,false);Note：All withDOMThe beginning of this event can only be added through event binding；
}else{
addEvent(obj,'mousewheel',wheel);
}
}
-------------------------------------------------------------------------------------------------
:Triggered when scrolling the mouse wheel;compatibleIESeries andchrome;
DOMMouseScroll:This event can only be added through event binding;只compatibleFF;
compatible性问题解决方案:Judgment browser;
:不compatibleFF；Firefox reportundefined;
chrome&&IE：
Down：-120；//The specific pop-up number shall prevail superior：120；
:
FF:
Down：3；//The specific pop-up number shall prevail---------------------------------------------------------------------------------------------------
= function () {
var oDiv = ('div');
addWheel(oDiv,function(bDown){
= null;
if(bDown){
= - 10 + 'px';
}else{
= + 10 + 'px';
}
});
}
</script>
</head>
<body>
<div ></div>
</body>
</html>
There are many compatibility issues with roller events, so when you achieve this effect, you must also test compatibility issues at any time.
This is probably the one that has been sorted out for the time being, and there are still many shortcomings. Please give me more valuable suggestions!
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.