溢出：滾動內容位置：絕對

我試圖通過滾動來實現查看效果的slideUp。這和我們每天都使用多個控制檯的任何控制檯（外殼，瀏覽器JavaScript，任何REPL）完全相同，但是具有一點動畫天賦。在小提琴中，我首先有一個預期效果的例子，以及期望的overflow: scroll秒。溢出：滾動內容位置：絕對

我一直無法讓這兩件作品一起工作。我在這裏看到過類似的例子，但沒有一個是小提琴，也沒有回答！

插圖：http://jsfiddle.net/n8tqw/

來源

2012-12-17 Jason Dunkelberger

效果似乎在兩個框中都能正常工作，只是在底部的一個框中，當添加一行時它不會自動向下滾動;這是問題嗎？ –

第二個沒有見底（底部：0需要位置：絕對在這種情況下工作），所以'推起'是不可能的。我知道關於scrollHeight，但第一個添加的元素不會覺得他們'推高'直到可滾動容器的高度被填充。不完全是我想要的。 –

REPLs從頂部開始構建以及僅在容器已滿時開始「推起」的事情非常普遍。 – tiffon

這是一個相當有趣的益智，但我終於得到它的工作。基本上你需要一個相對的容器，它擴展到整個絕對容器的高度，然後有另一個具有設置高度（200px）的容器（相對或靜態）。無論出於何種原因，瀏覽器不考慮「假頂」絕對含量是滾動區域之外：

http://jsfiddle.net/n8tqw/1/

$('#add-one').click(function() { 

    var $p = $('<p class="content">' + number++ + '</p>') 
     .appendTo('#from-bottom'); 
    $("#beholder").height($("#from-bottom").height()); 
    $("#scrollable-container").scrollTop($("#beholder").height()); 
    $p.hide().slideDown(); 
});

新的段落不能立即隱藏，因爲相對容器需要得到總高度，如果隱藏，則新段落的高度不會被添加。同樣，scrollable-container的scrollTop會隱藏起來。但是，最初不隱藏它似乎對用戶而言並不明顯。

來源

2012-12-17 23:18:14

很好！正是我想要的 –

溢出：滾動內容位置：絕對

回答

相關問題