はみ出さないスクロール

画面に埋込された、facebookとかtwitterとかのパーツ、
マウスでコロコロしてスクロールして一番下まで行くと・・・
スクロールイベントがはみ出して、画面全体がスクロールしますよね？

その動きにいつもイラッとするので、自分でパーツを作る際には、
「はみ出さないスクロール」がいいとおもいました。

動きは以下のページからお試しください。
http://hodade.adam.ne.jp/etc3/hamidasanai.html

いまのところiframeにしか対応していなくて、iframe側のHTMLソースに以下の記述をすると、スクロールイベントがはみ出さなくなります。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(window).on('mousewheel', function(e) {
    //上にスクロール
    if (e.originalEvent.deltaY < 0 || e.originalEvent.wheelDelta > 0) {
        //最上部まできたらスクロール無効
        if ($(window).scrollTop() == 0) {
            e.preventDefault();
        }
    }
    //下にスクロール
    if (e.originalEvent.deltaY > 0 || e.originalEvent.wheelDelta < 0) {
        //最下部まできたらスクロール無効
        var documentHeight = $(document).height();
        var scrollPosition = $(window).scrollTop() + document.body.clientHeight;
        if (documentHeight == scrollPosition) {
            e.preventDefault();
        }
    }
});
</script>

2014/12/18
jQueryプラグイン化してgithubで公開しました！ DIVタグにも適用できます。
https://github.com/hodade/jquery-scroll-hamidenai