왼쪽 및 오른쪽으로 슬라이딩되는 Js 제어 풀리 example

왼쪽 및 오른쪽으로 슬라이딩되는 Js 제어 풀리 example_javascript 기술

WBOY

풀어 주다： 2016-05-16 16:14:12

원래의

1580명이 탐색했습니다.

오늘 뭔가를 만들었습니다. 페이지가 원래 가로로 되어 있어서 아래쪽에 가로 스크롤 막대가 있었습니다. 세로로 만들 때는 스크롤 막대가 없었습니다. 이제는 마우스 휠이 좌우로 스크롤되어야 합니다. 이를 달성하려면 js 코드를 작성해야 합니다. 이를 작성하는 데 많은 문제가 발생했습니다

Firefox와 Chrome 세 가지 브라우저에서 지원하는 기능이 완전히 다르네요. 정말 말도 안 돼요.

설명할 몇 가지 지식 포인트는 다음과 같습니다
풀리 이벤트 모니터링
즉:마우스휠
fifox:DOMMousScroll
크롬:마우스휠
와 진짜 말문이 막힌다
스크롤의 반환값도 다릅니다
fifox는 세부 정보를 사용하여 -3을 반환합니다
다른 사람들은 WheelDelta를 사용하여 -120을 반환합니다
스크롤 방향을 결정하는 반환 값이 있습니다

Chrome을 제외하고 document.documentElement.scrollLeft
를 사용하여 페이지의 왼쪽 이동을 결정하는 일반 브라우저도 있습니다. 하지만 크롬 브라우저는 document.body.scrollLeft

를 사용해야 합니다.

코드는 다음과 같이 공유됩니다.

<!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>

로그인 후 복사

사실 이 코드에는 문제가 있습니다. 크롬 브라우저에서는 마우스를 회색 영역에 놓았을 때만 슬라이드가 가능합니다. 아직 이 문제를 해결하지 못했다면 메시지를 남겨주세요. 알려주세요. 감사합니다.