I got something today. The page was originally horizontal, so there was a horizontal scroll bar at the bottom, and there was no scroll bar vertically. Now it is required that the mouse pulley should scroll left and right, which requires writing js code to implement it. I encountered a lot of trouble in writing this process.
The functions supported by the three browsers of ie Firefox Chrome are completely different, it's crazy.
Here are a few knowledge points to explain
Monitor pulley events
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
Alas, speechless
The scrolling return value is also different
firfox returns +-3 with detail
Others use wheelDelta to return +-120
There is a return value to determine the direction of the scrolling
In addition to chrome judgment page left movement, document.documentElement.scrollLeft is used for general browsers.
However, the Chrome browser needs to use document.body.scrollLeft
OK, the code is shared as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Unt titled document</title></head> <body><div id="test"></div><script language="javascript"> var dbody=document.getElementById('test');//ff use objAddEvent(document,'DOMMousScroll', function(e){return mouse_scroll(e);}) //No ff chrome use objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);}) //Chrome use objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);}) function mouse_scroll(e){e=e || window.event;var delD=e.wheelDelta?e.wheelDelta: -e.detail*40;//Judge up and down direction var move_s=delD>0?-50:50;document.documentElement.scrollLeft+=move_s; //Use this for non-chrome browsers //Use this for Chrome browsers if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s; return false;}//This is a function that adds monitoring methods to the object function objAddEvent(oEle, sEventName, fnHandler){if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);else oEle.addEventListener(sEventName, fnHandler, false);} </script></body></html>In fact, there is a problem with this code. In the Chrome browser, only the mouse can slide in that gray color. I have not solved this problem. If that expert solves it, you can leave a message to tell me, thank you.