왼쪽 및 오른쪽으로 슬라이딩되는 Js 제어 풀리 example_javascript 기술
- WBOY원래의
- 2016-05-16 16:14:121561검색
오늘 뭔가를 만들었습니다. 페이지가 원래 가로로 되어 있어서 아래쪽에 가로 스크롤 막대가 있었습니다. 세로로 만들 때는 스크롤 막대가 없었습니다. 이제는 마우스 휠이 좌우로 스크롤되어야 합니다. 이를 달성하려면 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?e.wheelDelta: -e.detail*40;//判断上下方向
var move_s=delD>0?-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>
사실 이 코드에는 문제가 있습니다. 크롬 브라우저에서는 마우스를 회색 영역에 놓았을 때만 슬라이드가 가능합니다. 아직 이 문제를 해결하지 못했다면 메시지를 남겨주세요. 알려주세요. 감사합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.