javascript 固定位置水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22425068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed position horizontal scrollbar
提问by Elie Roux
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...
我有一个很长的 div（假设比屏幕长），它带有一个水平滚动条，出现在 div 的底部，我希望水平滚动条出现在窗口的底部，而不是出现在 div 的底部。我的情况类似于这个 fiddle，我无法真正修改布局......
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>
with corresponding css:
带有相应的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?
我怎样才能达到我想要的？
Thank you!
谢谢！
Note:somehow the same as Fix scrollbar to bottombut more complete and with an example, and not similar to Fixing the horizontal scrollbar of a div to the bottom of a pagebecause I cannot modify my layout according to the accepted (and only) answer.
注意：不知何故与将滚动条固定到底部相同但更完整并带有示例，而不类似于将div 的水平滚动条固定到页面底部，因为我无法根据接受的（且唯一的）答案修改我的布局.
Edit: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...
编辑：虽然我在谷歌上找不到与这个问题相关的任何内容，但似乎我不是第一个遇到这个问题的人：gmail 实现了这样的事情。如果您打开一个带有小窗口的邮件线程，则该线程的 div 会有一个自定义滚动条，它总是出现在屏幕底部……糟糕的源代码被混淆了……
回答by R. Oosterholt
There is a nice jQuery pluginwhich takes care of this.
有一个很好的jQuery 插件可以解决这个问题。
You can use it like this:
你可以这样使用它：
$(document).ready(function () {
$(".yourClassName").floatingScroll();
});
回答by Gromo
Try jQuery.Scrollbar, look at the advanced demo examples - there is "external" scrollbar demo you need.
尝试jQuery.Scrollbar，查看高级演示示例 - 您需要“外部”滚动条演示。
回答by bingjie2680
set the scrolling width to larger than the longdiv. see this: http://jsfiddle.net/xaTe9/2/
将滚动宽度设置为大于 longdiv。看到这个：http: //jsfiddle.net/xaTe9/2/
#scrolling {
overflow: hidden;
width: 1500px;
display: block;
position: relative;
border: 1px solid blue;
}
