ホームページ > 記事 > ウェブフロントエンド > JS コントロールプーリーが左右にスライドする example_javascript スキル
JS コントロールプーリーが左右にスライドする example_javascript スキル
- WBOYオリジナル
- 2016-05-16 16:14:121561ブラウズ
今日何かを作りました。元々は横向きのページだったので、縦向きのときはスクロールバーがありませんでしたが、マウスホイールで左右にスクロールする必要がありました。これを実現するには 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?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 までご連絡ください。