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 Web應用程序（到目前為止，我已經在Firefox上對其進行了全部測試），這很好用。 唯一的問題是，對於滾動得太低的元素，它總是傾向於只滾動一點點越過目標元素，而不是一直滾動到其末尾。 我不確定元素填充是否與之相關，或者我的數學是否糟透了。

任何人都對如何改善這一點有什么絕妙的主意？

Answer 1

假設frame元素及其子元素相對放置，則如果元素太高將觸發的代碼部分效果很好。 如果不是，則使用絕對偏移量，它將不起作用。

至於如果元素太低會觸發的部分，我假設當您說“它總是傾向於只滾動一點到目標元素而不是一直滾動到它的末尾”時，您所指的是該元素如果框架小於其偏移量，則將被切除。 請嘗試以下操作：

// If the frame is less than or equal to the element's height
if( frameHeight <= elem.attr('height') ){
   //Scroll to it's offsetBottom - the total frameHeight, so that the full element will be displayed
   frame.scrollTop( offsetBottom - frameHeight ); 
}else {
   //Else, the element's height is less than the frame, so the entire element will be displayed if we just scroll to the element's offsetBottom.
   frame.scrollTop( offsetBottom );
}

我創建了一個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);
    });     
});