Js control pulley sliding left and right example_javascript skills-JS Tutorial-php.cn

Js control pulley sliding left and right example_javascript skills

WBOY

Release： 2016-05-16 16:14:12

Original

1560 people have browsed it

I made something today. The page was originally horizontal, so there was a horizontal scroll bar at the bottom. When it was vertical, there was no scroll bar. Now the requirement is that the mouse wheel should scroll left and right. This requires writing js code to achieve it. Write this encountered a lot of trouble

The functions supported by the three browsers of ie Firefox and Chrome are completely different, it’s really crazy.

Here are a few knowledge points to explain
Monitor pulley events
ie:onmousewheel
firfox:DOMMouseScroll
chrome:mousewheel
Wow, I’m really speechless
The return value of scrolling is also different
firfox uses detail to return -3
Others use wheelDelta to return -120
There is a return value to determine the direction of scrolling

There are also general browsers except Chrome that use document.documentElement.scrollLeft
to determine the left movement of the page. But chrome browser needs to use document.body.scrollLeft

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>无标题文档</title>
</head>
 
<body>
<div id="test" style="width:3000px; height:500px; background:#666;"></div>
<script language="javascript">
 
var dbody=document.getElementById('test');
//ff用
objAddEvent(document,'DOMMouseScroll', function(e){return mouse_scroll(e);})
 
//非ff chrome 用
objAddEvent(document,'mousewheel', function(e){return mouse_scroll(e);})
 
//chrome用
objAddEvent(dbody,'mousewheel', function(e){return mouse_scroll(e);})
function mouse_scroll(e){
e=e || window.event;
var delD=e.wheelDelta&#63;e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0&#63;-50:50;
document.documentElement.scrollLeft+=move_s; //非chrome浏览器用这个
//chrome浏览器用这个
if(document.documentElement.scrollLeft==0)document.body.scrollLeft+=move_s;
 
return false;
}
//这个是给对象增加监控方法的函数
function objAddEvent(oEle, sEventName, fnHandler)
{
if(oEle.attachEvent) oEle.attachEvent('on'+sEventName, fnHandler);
else oEle.addEventListener(sEventName, fnHandler, false);
}
 
 
</script>
</body>
</html>

Copy after login

There is actually a problem with this code. In the Chrome browser, the mouse can only slide when the mouse is placed in the gray area. I have not solved this problem. If an expert solves it, please leave a message and let me know. Thank you.