jQuery自定義內容滾動條

Question

我正在使用此jQuery plugin來滾動內容。我發現的問題有時候，它並沒有一直滾動到底部，這意味着滾動條到達最後，但它只有80％的內容。任何想法可能導致這種情況？或任何已知的修復？

謝謝！

Answer 1

我的直覺告訴你有一個盒子模型問題導致高度被報告爲你想要的東西以外的東西。它可以是你的內容對高度沒有貢獻（如浮動或定位元素），也可以是對內容沒有貢獻的非內容屬性（如填充或邊框）。

首先，無貢獻內容：

一些DOM元素有助於父元素的高度，和別人不一樣。具體而言，具有除none之外的float屬性的元素以及具有除static之外的position屬性的元素。

如果問題是浮動元素，則需要添加另一個清除浮動元素。清除元素將出現在浮動內容的下方，並且將有助於父母的身高。

考慮這個HTML：

<div class="wrapper"> 
    <div class="sidebar" style="float:right"> 
     Lots and lots of content here (very tall) ... 
    </div> 
    <div class="content"> 
     A little content here (shorter than sidebar) 
    </div> 
</div> 

包裝格將只考慮內容div的總高度，而忽略了側邊欄的高度的高度。

爲了解決這個問題，你需要一個clear屬性的元素在你的滾動包裝的底部，像這樣：

<div class="wrapper"> 
    <div class="sidebar" style="float:right"> 
    Lots and lots of content here (very tall) ... 
    </div> 
    <div class="content"> 
    A little content here (shorter than sidebar) 
    </div> 
    <br style="clear:both" /> 
</div> 

現在無貢獻的非內容屬性：

另一件事要考慮的是元素的高度不考慮填充，只是框內的內容。試想一下：

<div class="wrapper" style="padding:10px"> 
    <div class="content" style="height:100px"> 
    ... 
    </div> 
</div> 

您可能希望包裝div的高度爲120像素（100像素加上各10px的頂部和底部填充）。然而，它的高度報告只有100px，因爲這是它的內容的高度。

在這種情況下，解決的辦法是讓你的滾動包裝沒有填充，並用另一elemenet提供填充：

<div class="wrapper"> 
    <div style="padding:10px"> 
    <div class="content" style="height:100px"> 
     ... 
    </div> 
    </div> 
</div> 

我不知道如果無論這些實際上是你的問題，但基於描述，這些是我最好的猜測。希望這可以幫助！