[解決済み] 内部要素のスクロール位置が上/下に達したときに親要素のスクロールを防止しますか？

質問

小さなフローティングツールボックスを作成しました。 position:fixed; overflow:auto . 問題なく動作しています。

しかし、そのボックスの内側を (マウス ホイールで) スクロールして、下部または上部に到達すると、親要素が "takes over" the "scroll request" : ツールボックスの後ろのドキュメントがスクロールされるのです。

- これは迷惑なことであり、ユーザーが求めているものではありません。

jQueryを使っているので、event.stoppropagation()でこの挙動を止められると思ったのですが。

$("#toolBox").scroll( function(event){ event.stoppropagation() });

関数に入りますが、それでもとにかく伝搬が起こります（ドキュメントがスクロールします）。

- SO（とGoogle）でこの話題を検索するのは意外と難しいので、質問させていただきました。

scroll-eventの伝搬/バブリングを防ぐには？

編集する。

amustill（とBrandon Aaronによるmousewheel-plugin）により、解決されました。

https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js

$(".ToolPage").bind('mousewheel', function(e, d)  
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    }
    else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});

どのように解決するのですか？

ブランドン・アーロンの使用で可能です。 マウスホイールプラグイン .

ここでは、そのデモをご紹介します。 http://jsbin.com/jivutakama/edit?html,js,output

$(function() {

  var toolbox = $('#toolbox'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;

  toolbox.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});