Question

我有一个长div（让我们说长于屏幕），水平滚动条出现在div的底部，我希望水平滚动条出现在窗口的底部，而不是在div的底部。我的情况类似于this fiddle，我无法真正修改布局......

示例：

  <p>blabla</p>
  <div id="scrolling">
    <div id="longdiv">
      <p>Looooooong looooong div, please scroll down to see the horizontal scrollbar at the bottom! If only it was <pre>position:fixed; bottom:0px;</pre>!</p>
    </div>
  </div>
  <p>blabla</p>

与相应的css：

#scrolling {
  overflow: auto;
  width: 500px;
  display: block;
  position: relative;
  border: 1px solid blue;
}
#longdiv {
  width: 1500px;
  height: 2000px;
  border: 1px solid red;
}

我如何实现我的目标？

谢谢！

注意：某种程度上与Fix scrollbar to bottom相同但更完整且有一个示例，与Fixing the horizontal scrollbar of a div to the bottom of a page不相似，因为我无法根据接受的方式修改我的布局（和只有）回答。

编辑虽然我在google上找不到与此问题相关的任何内容，但似乎我不是第一个遇到此问题的人：gmail实现了这样的功能。如果你打开一个带有一个小窗口的邮件线程，那么线程div的自定义滚动条就会出现在屏幕的底部......太糟糕的源代码被禁止了......

Answer 1

有一个很好的jQuery plugin可以解决这个问题。

你可以像这样使用它：

$(document).ready(function () {
    $(".yourClassName").floatingScroll();
});

Answer 2

尝试jQuery.Scrollbar，查看高级演示示例 - 有＆＃34;外部＆＃34;你需要的滚动条演示。

Answer 3

将滚动宽度设置为大于longdiv。看到这个：http://jsfiddle.net/xaTe9/2/

#scrolling {
   overflow: hidden;
   width: 1500px;
   display: block;
   position: relative;
   border: 1px solid blue;
}

固定位置水平滚动条

3 个答案: