1

これが簡単な質問である場合は申し訳ありませんが、この問題についてグーグルで検索するのは難しいと思いました. 自作のチャット システムを自分の Web サイトに実装しようとしています。どのページの右下にも、スクロール可能な div で構成されるチャットウィンドウがあります (gtalk 方式で)。表示するメッセージが多すぎる場合、この div はスクロール可能になります。ここまでは順調ですね。

ユーザーがこの div をスクロールして一番下に到達すると、スクロールが停止するようにしたいのですが、実際にはチャット div がスクロールされると、ページ全体がスクロールを開始します。ユーザーがページをスクロールしたい場合は、マウスをチャット div の外に移動してからスクロールする必要があります。

シンプルな CSS でこれを達成できますか、それとも JS が必要ですか?

前もって感謝します。

4

1 に答える 1

0

http://jsfiddle.net/Tgm6Y/1447/

私はあなたがこのようなものが必要だと思います..そうですか？このようなものが必要な場合..cssに加えて、jsも必要です..

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');
于 2012-10-23T10:03:02.000 に答える