jQuery advice : 요소를 스크롤하기 위해이 기능을 개선하려면 어떻게해야합니까?

Question

주어진 하위 요소를 상위 내에서보기로 스크롤하는 함수를 만들었습니다. 다음과 같이 간다 :

function keepScrolledOver(elem) 
{ 
    frame = elem.parent(); 

    var scrollPos = frame.scrollTop(); 
    var offset = elem.attr("offsetTop"); 

    // If the element is scrolled too high... 
    if(offset < scrollPos) 
    { 
     frame.scrollTop(offset); 
     // frame.attr("scrollTop", offset); 
    } 

    // If the element is scrolled too low... 
    else 
    { 
     var frameHeight = frame.height(); 
     var offsetBottom = offset + elem.height(); 
     var scrollBottom = scrollPos + frameHeight; 


     if(offsetBottom > scrollBottom) 
     { 
      // frame.attr("scrollTop", offsetBottom); 
      if(frameHeight < offsetBottom) 
       frame.scrollTop(offsetBottom - frameHeight); 
       // frame.attr("scrollTop", offsetBottom - frameHeight); 
     } 
    } 
} 

지금까지, 내 ​​파이어 폭스 웹 앱 (파이어 폭스 내가 지금까지, 내 ​​말에 그것을 테스트 한 모든입니다)이 잘 작동합니다. 오직 문제는 너무 낮게 스크롤 된 요소의 경우 항상 끝까지 대상 요소보다 작은 비트를 스크롤하는 경향이 있다는 것입니다. 엘리먼트 패딩과 무언가 관련이 있는지 확실하지 않습니다. 그렇지 않으면 수학 문제가 해결됩니다.

누구나 개선 방법에 대한 훌륭한 아이디어가 있습니까?

Answer 1

요소가 너무 높으면 실행되는 코드 섹션은 프레임 요소와 해당 자식 요소가 상대적으로 배치되었다고 가정하면 잘 작동합니다. 그렇지 않으면 절대 오프셋을 사용하고 작동하지 않습니다.

요소가 너무 낮 으면 발생하는 부분은 "최종 요소가 대상 요소를 지나치게 작게 스크롤하는 경향이 있습니다"라고 말할 때 프레임이 오프셋 (offset)보다 작은 경우는 요소가 잘리는 것을 확인합니다. 다음을 시도해보십시오.

다음과 같이 HTML 데모 페이지를 만들었지 만 다른 문제는 발생하지 않았습니다. 요소의 높이를 가지고 놀고 휴식을 취할 수 있는지 확인하십시오. 파이어 폭스 3.5를 사용했고 모든 것이 멋졌습니다.

<button id="buttonTest1">Slide to Test1</button> <button id="buttonTest2">Slide to Test2</button> 
<div style="position:relative;width:100%;height:620px;overflow:scroll;"> 
    <div style="position:relative;height:50px;"></div> 
    <div id="childSlide1" style="width:50px;height:50px;position:relative;">Test</div> 
    <div id="childSlide2" style="width:50px;height:50px;position:relative;top:850px;">Test2</div> 
</div> 


$(document).ready(function(){ 
    function keepScrolledOver(elem){ 
     var frame = elem.parent(); 

     var scrollPos = frame.scrollTop(); 
     var offset = elem.attr("offsetTop"); 
     alert ('scrollPos: '+scrollPos+' offset: '+offset); 
     //var jQoffset = elem.offset(); 
     //alert ('jQoffset: '+jQoffset.top+' '+jQoffset.left); 
     // If the element is scrolled too high... 
     if(offset < scrollPos) 
     { 
       alert ('scrollPos '+scrollPos+' is bigger than offset '+offset); 
       frame.scrollTop(offset); 
       // frame.attr("scrollTop", offset); 
     } 

     // If the element is scrolled too low... 
     else 
     { 
       var frameHeight = frame.height(); 
       var offsetBottom = offset + elem.height(); 
       var scrollBottom = scrollPos + frameHeight; 
       alert('frameHeight: '+frameHeight+' offsetBottom: '+offsetBottom+' scrollBottom: '+scrollBottom); 


       if(offsetBottom > scrollBottom) 
       { 
         // frame.attr("scrollTop", offsetBottom); 
         if(frameHeight <= elem.attr('height')) 
         { 
          frame.scrollTop(offsetBottom - frameHeight); 
          // frame.attr("scrollTop", offsetBottom - frameHeight); 
         }else { 
          frame.scrollTop(offsetBottom); 
         } 
       } 
     } 
    } 

    $('#buttonTest1').click(function(){ 
     var scrollElement = $('#childSlide1'); 
     keepScrolledOver(scrollElement); 
    }); 

    $('#buttonTest2').click(function(){ 
     var scrollElement = $('#childSlide2'); 
     keepScrolledOver(scrollElement); 
    });  
});