div가 하단으로 스크롤되면 전체 페이지 스크롤을 차단하십시오.

Question

죄송합니다. 간단한 질문이지만 미안하지만이 문제에 대해 Google에 알리는 것이 어렵습니다. 나는 내 웹 사이트에 집에서 만든 채팅 시스템을 구현하는 중입니다. 어떤 페이지의 오른쪽 하단에는 스크롤 가능한 div (gtalk 방식으로 구성)로 구성된 chatwindow가 있습니다. 표시 할 메시지가 너무 많으면이 div는 스크롤 할 수있게됩니다. 여태까지는 그런대로 잘됐다.

사용자가이 div를 스크롤하여 아래쪽에 도달하면 스크롤이 중지되지만 실제로는 div가 스크롤되면 전체 페이지가 스크롤되기 시작합니다. 사용자가 페이지를 스크롤하려면 채팅 div에서 마우스를 움직여 스크롤해야합니다.

간단한 CSS에서이를 수행 할 수 있습니까? 아니면 일부 JS가 필요합니까?

미리 감사드립니다.

Answer 1

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

나는 u를 이런 식으로 뭔가를해야 할 것 같아요 .. 오른쪽? u는 이것 같이 필요로하는 경우에. css u와 함께 몇몇 너무 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');