JS コントロールプーリーが左右にスライドする example_javascript スキル-jsチュートリアル-php.cn

JS コントロールプーリーが左右にスライドする example_javascript スキル

WBOY

リリース： 2016-05-16 16:14:12

オリジナル

1560 人が閲覧しました

今日何かを作りました。元々は横向きのページだったので、縦向きのときはスクロールバーがありませんでしたが、マウスホイールで左右にスクロールする必要がありました。これを実現するには js コードを書く必要があります。これを書くのに多くの困難が生じました

Firefox と Chrome の 3 つのブラウザがサポートする機能はまったく異なり、本当にクレイジーです。

ここで、いくつかの知識ポイントを説明します
プーリーイベントを監視します
例:オンマウスホイール
firfox:DOMMouseScroll
クロム:マウスホイール
うわー、本当に言葉が出ない
スクロールの戻り値も異なります
filfox は詳細を使用して -3
を返します他の人は、wheelDelta を使用して -120
を返しますスクロール方向を決定する戻り値があります

Chrome 以外の一般的なブラウザでも、document.documentElement.scrollLeft
を使用してページの左方向への移動を決定します。ただし、Chrome ブラウザでは 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>

ログイン後にコピー

このコードには実際には問題があり、マウスが灰色の領域に置かれている場合にのみスライドできます。専門家が解決した場合は、メッセージを残してください。教えてください、ありがとう。