固定位置水平滾動條

Question

我有一個長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>

與相應的CSS：

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

我怎樣才能實現我的目標？

謝謝！

注意：以某種方式與修復滾動條到底部相同但更完整並且有一個示例，並且與將div的水平滾動條修復到頁面底部不相似，因為我無法根據接受的（並且只有）答案修改我的布局。

編輯：雖然我在谷歌上找不到與此問題相關的任何內容，但似乎我不是第一個遇到此問題的人：gmail實現了這樣的事情。 如果你打開一個帶有一個小窗口的郵件線程，就會有一個自定義的滾動條用於線程的div，alms出現在屏幕的底部...太糟糕的源代碼被勸阻......

Answer 1

有一個很好的jQuery插件可以解決這個問題。

你可以像這樣使用它：

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