jQueryのアドバイス：要素をスクロールするためにこの機能を改善するにはどうすればよいですか？

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

これまでのところ、私のFirefoxウェブアプリ（Firefoxは私がこれまでにそれをテストしたすべてで、私が意味する）、これは素晴らしい作品のために。唯一の問題点は、スクロールした要素が低すぎると、対象要素の最後までスクロールする傾向があることです。要素の詰め物と何か関係があるかどうか、私の数学がちょうど吸うかどうかは分かりません。

誰でもこれを改善するための素晴らしいアイデアはありますか？

Answer 1

要素が高すぎる場合に起動するコードのセクションは、フレーム要素とその子要素が相対的に配置されていると仮定してうまく動作します。そうでない場合は、絶対オフセットを使用するため、動作しません。

要素が低すぎると発生するセクションについては、「対象要素の端から端までずっと小さな要素をスクロールする傾向がある」と言いますと、フレームがそのオフセットより小さい場合、要素が切り捨てられていることを示します。以下を試してみてください：

次のようにHTMLデモページを作成しましたが、その他の問題は発生しませんでした。要素の高さで遊んで、あなたがそれを壊すことができるかどうかを見てください。私はFirefox 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); 
    });  
});