DOMMouseScrollを使って特定のID内でのみマウスホイールを作動させたい

質問

はじめまして。お世話になります。

下記のページを参考に、マウスホイールで上下にスクロールするページを制作したのですが、IDを設定した<div>にマウスが乗った状態にのみマウスホイールがきくようにしたいのですが、おわかりになる方がおられましたらご教授いただけますでしょうか。
どうぞよろしくお願いいたします。

http://eff-bee-eye.de/activescroll99.html

回答No.4

noname#84373

自分で書いておいてこう言うのも変ですが・・・
function wheel( event ) {
var obj = event.target || event.srcElement;
のなかのeventという名前は混乱のもとだよね～！
evtとかに代えるべき。

それとやってることはJavascriptの板がふさわしいのでは？

回答No.3

noname#84373

なんとも次から次へと・・・^^;
parentNodeを利用して、親を探します

たとえば
<div id="tekitou"><h3><span id="a">abc</span></h3><div>
ならば
if (parentSearch('a', 'tekitou')) alert('親がtekitouだった');

function parentSearch(elementId, targetId){
　var e = document.getElementById(elementId);
　do if (e.id == targetId) return true; while (e = e.parentNode)
　return false;
}
まぁ～俺みたいなやつのヒントで理解できるんだから大丈夫だね！
ちなみに親探しは未検証！

お礼

ご返答ありがとうございます。
難しいですね。。
まだうまく動かない状態なのですが、ちょっとdivの入れ子が入り組んだ状態になってきてるので、精査してから再度検証してみます。

ありがとうございました。

回答No.2

noname#84373

window.onmousewheel = document.onmousewheel = wheel;
のイベント呼び出し定義部分を
window.onmousewheel = document.onmousewheel = function(){ wheel(event);};
のように代える

whell関数の第一引数にeventが渡されていなかったみたい

function wheel( event ) {
var obj = event.target || event.srcElement;
if (obj.id != 'ここに適当なID') return;

わかると思うけど、
<div id="???"><h3>ここならスクロール</h3></div>ならだめ。
<div><h3 id="???">ここならスクロール</h3></div>ならOK！

お礼

_pipi_さま

ご回答ありがとうございます。
ちゃんと動きました。すごいです！ありがとうございます。

それでは、また新たな疑問なのですが、入れ子にしたdivで大外のdivに指定したIDだけをしてした状態だと、内側のdiv内にマウスが乗った状態だとホイールが効かなくなったので、複数のidを指定する方法か、もしくは他の手段がありましたら教えていただけますでしょうか。

また、ちょっと縦長のページなので、ブラウザ自体のスクロールバーが出るのですが、特定IDのdiv内にマウスが乗っているときはこのスクロールバーをスクロールしないようにしたいのですが可能でしょうか。

●div内にマウスがあるとき → ホイールが効く、ブラウザのスクロールは停止
●div外にマウスがあるとき → ホイールは効かない、ブラウザスクロールは作動

上記のイメージですが、もしお時間がございましたらで結構ですので、ご教授いただけると幸いです。よろしくお願いいたします。

回答No.1

noname#84373

function wheel( event )
の中に、
var obj = event.srcElement||event.target;
if (obj.id != 'てきとうなID') return;
とか入れる。

もしくは
if ( window.addEventListener ) window.addEventListener( 'DOMMouseScroll', wheel, false );
window.onmousewheel = document.onmousewheel = wheel;
のときに、
windowにイベントをつけないで
document.getElementById('てきとうなID').addEventListener～
とするか、
すみません。未検証だし、正しいかどうかもわかりません。

お礼

ご回答ありがとうございます。
どちらも検証してみましたが、指定ID内だけで動作する形にはなりませんでした。
もうちょっと自力でやってみます。
ありがとうございました。