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> 

我不知道如果无论这些实际上是你的问题，但基于描述，这些是我最好的猜测。希望这可以帮助！