Javascript 固定位置水平滚动条

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

例如：

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

我怎样才能实现我想要的

谢谢大家!

注意：在某种程度上与相同，但更完整，并附有示例，与不相似，因为我无法根据接受（且唯一）的答案修改布局

---

编辑：虽然我在谷歌上找不到与这个问题相关的任何东西，但我似乎不是第一个遇到这个问题的人：gmail实现了这样一个功能。如果你用一个小窗口打开一个邮件线程，就会有一个自定义的滚动条显示该线程的div，alwas会出现在屏幕底部。。。源代码太糟糕了…

将滚动宽度设置为大于longdiv。见此：

试试看，看看高级演示示例-您需要一个“外部”滚动条演示。

有一个很好的解决方案

您可以这样使用它：

---

我不知道我是否理解你的要求。这就是你想要的吗：？对不起，我不能改变布局使div自动滚动，它必须是长的，并与主体一起滚动。。。我真的无法改变布局，唯一必须移动的是水平滚动条……我还没有足够的声誉来回答自己的问题，但这里有一把工作小提琴：！你的意思是你可以改变html，但不能改变css？我的意思是，通过设计，这个div不比屏幕大，它实际上是一个jquery ui布局窗格。。。所以我绝对不能让它比屏幕大…如果这是限制，那么你只能在div中隐藏滚动条，因为如果div不比窗口大，滚动条从哪里来？我暗自希望有一个经典的javascript模式可以做到这一点（虽然在web上找不到任何）。我尝试过自定义滚动条jquery插件，但没有一个提供此功能…抱歉。没办法。

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

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

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