固定位置水平滚动条

Question

我有一个带有水平滚动条的长 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，看看高级演示示例 - 您需要“外部”滚动条演示。

Answer 3

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

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