固定位置水平滚动条 [英] fixed position horizontal scrollbar

问题描述

我有一个很长的div(比屏幕长)，它的水平滚动条显示在div的底部，我希望水平滚动条显示在窗口的底部，而不是显示在屏幕的底部div.我的情况类似于此小提琴，我无法真正修改布局...

I have a long div (let's say longer than the screen) with a horizontal scrollbar, appearing at the bottom of the div, and I would like the horizontal scrollbar to appear at the bottom of the window, not at the bottom of the div. My situation is similar to this fiddle, and I cannot really modify the layout...

示例:

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

我如何实现自己想要的?

How can I achieve what I want?

谢谢！

注意:某种程度上与将滚动条固定到底部但更完整且带有示例，与

Note: somehow the same as Fix scrollbar to bottom but more complete and with an example, and not similar to Fixing the horizontal scrollbar of a div to the bottom of a page because I cannot modify my layout according to the accepted (and only) answer.

编辑:尽管我在Google上找不到与此问题相关的任何内容，但似乎我不是第一个遇到此问题的人:gmail实现了这样的事情.如果您使用一个很小的窗口打开一个邮件线程，则该线程的div会自定义滚动条，该滚动条总是出现在屏幕底部...太糟糕的源代码被混淆了...

though I cannot find anything related to this question on google, it seems I'm not the first person to have had this problem: gmail implements such a thing. If you open a mail thread with a tiny window, there's a custom scrollbar for the div of the thread, alwas appearing at the bottom of the screen... Too bad source code is obfucated...

推荐答案

有一个不错的 jQuery插件来解决这个问题.

There is a nice jQuery plugin which takes care of this.

您可以像这样使用它:

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

这篇关于固定位置水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！