Home > Developer > Web Develop
<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>#div {width:300px; height:300px; background:red; } </style> <script>function Addevent (OBJ,SEV,FN) {if(obj.addeventlistener) {returnObj.addeventlistener (SEV,FN,false); }Else{ returnObj.attachevent (' on'+SEV,FN); }} function Addwheel (OBJ,FN) {function wheel (EV) {varoevent = EV | |Event; varBdown =true; Bdown= Oevent.wheeldelta?oevent.wheeldelta >0: Oevent.detail <0; FN&&fn (Bdown); Oevent.preventdefault&&Oevent.preventdefault (); return false
------------------------------------------------------------------
return false prevents the browser from default behavior and fails when encountering an event that is added by the binding;
all use Oevent.preventdefault (); Make a judgment before using this method;
-------------------------------------- ---------------------------- if (Window.navigator.userAgent.indexOf ( " firefox " )!=-1 ) {Obj.addeventlistener ( " dom mousescroll ", Wheel,false dom can only be added by event binding;} else {addevent (obj, " mousewheel " ,wheel); }}
--------------------------------------------------------------------- ----------------------------
Obj.onmousewheel: triggers when scrolling the mouse wheel; compatible with IE series and chrome;
Dommousescroll: This event can only be added in the form of event bindings; FF only;
Compatibility Problem Resolution: judging the browser;
Oevent.wheeldelta: incompatible ff; Firefox report undefined;
Chrome&&ie:
on: 120;
Oevent.detail:
FF:
below: 3;//with specific projectiles The word is the
------------------------------------------------------------------------------------------------- --
window.onload = function () {
var odiv = document.getElementById (' div ');
Addwheel (odiv,function (bdown) {
odiv.onmousewheel = null;
if (bdown) {
oDiv.style.height = odiv.offsetheight-10 + ' px ';
}else{
ODiv.style.height = odiv.offsetheight + + ' px ';
}
});
}
</script>
<body>
<div id= "div" ></div>
</body>
There are more compatibility issues with wheel events, so you should always test for compatibility when implementing this effect.
The temporary arrangement of probably these, there are a lot of deficiencies in the place, we have more valuable advice! ^_^
JS Roller events need to be aware of compatibility issues
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
