Question

我正在使用此jQuery plugin来滚动内容。我发现的问题有时候，它不会一直滚到底部，这意味着滚动条到达终点，但它只有80％通过内容。有什么想法会导致这种情况吗？或任何已知的修复？

谢谢！

Answer 1

我的直觉说你有一个盒子模型问题导致高度被报告为你预期的高度。它可能是你有高度没有贡献的内容（如浮动或定位元素），或者是对高度没有贡献的非内容属性（如填充或边框）。

首先，非贡献内容：

有些DOM元素会影响父元素的高度，而有些则不会。具体而言，float属性不是none的元素，而position属性的元素不是static。

如果问题是浮动元素，则需要添加另一个清除浮动的元素。清除元素将显示在浮动内容下方，并将有助于父级的高度。

考虑这个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的高度仅考虑内容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的高度为120px（100px加上每个10px的顶部和底部填充）。然而，它的高度仅为100px，因为它是其内容的高度。

在这种情况下的解决方案是让你的滚动包装器没有填充，并使用另一个elemenet来提供填充：

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

如果其中任何一个确实是您的问题，我知道，但根据描述，这些是我最好的猜测。希望这有帮助！

jQuery自定义内容滚动条

1 个答案: