Home > Article > Web Front-end > Js control pulley sliding left and right example_javascript skills

Js control pulley sliding left and right example_javascript skills

WBOYOriginal: 2016-05-16 16:14:121560browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js to achieve drag and drop effect_javascript skillsNext article：js to achieve drag and drop effect_javascript skills

See more

Js control pulley sliding left and right example_javascript skills

Related articles