固定位置水平滚动条

我有一个很长的 div（比方说比屏幕长），带有一个水平滚动条，出现在 div 的底部，我希望水平滚动条出现在窗口的底部，而不是出现在 div 的底部。我的情况类似于这把小提琴 http://jsfiddle.net/xaTe9/1/，而且我真的无法修改布局......

Example:

  <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;
}

我怎样才能实现我想要的？

谢谢你！

Note:某种程度上与将滚动条固定到底部 https://stackoverflow.com/questions/20405680/fix-scrollbar-to-bottom但更完整并带有示例，并且不类似于将 div 的水平滚动条固定到页面底部 https://stackoverflow.com/questions/19996874/fixing-the-horizontal-scrollbar-of-a-div-to-the-bottom-of-a-page因为我无法根据接受的（也是唯一的）答案修改我的布局。

Edit:虽然我在谷歌上找不到与这个问题相关的任何内容，但似乎我不是第一个遇到这个问题的人：gmail 实现了这样的事情。如果你打开一个带有小窗口的邮件线程，线程的 div 会有一个自定义滚动条，总是出现在屏幕底部......太糟糕了源代码被混淆了......

有一个不错的jQuery 插件 https://github.com/Amphiluke/floating-scroll它负责处理这个问题。

你可以这样使用它：

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