javascript - 将 div 滚动到底部后阻止整个页面滚动

Question

对不起，如果这是一个简单的问题，但我发现很难在这个问题上用谷歌搜索。我正在为我的网站实施自制聊天系统。在任何页面的右下角都会有一个由可滚动的 div 组成的聊天窗口（以 gtalk 方式）。如果要显示的消息过多，则此 div 变为可滚动的。到目前为止，一切都很好。

我想要这样，当用户滚动这个 div 并到达它的底部时，滚动停止：但实际上一旦滚动聊天 div，整个页面就会开始滚动。如果用户想要滚动页面，我希望他必须将鼠标移出聊天 div，然后滚动。

我可以用简单的 CSS 实现这一点还是需要一些 JS？

提前致谢。

Answer 1

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

I guess u need something like this.. Right? if u need something like this.. Along with css u need some js too..

$.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');