将 div 滚动到底部后阻止整个页面滚动答案

【问题标题】：Block entire page scrolling once a div is scrolled to bottom将 div 滚动到底部后阻止整个页面滚动
【发布时间】：2012-10-23 18:03:02
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

【讨论】：