Javascript 如何使位置：固定 div 水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8912454/
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
How to make position:fixed div scroll horizontally
提问by John Assymptoth
I have a div with position:fixed, as the image below suggests.
我有一个带有 position:fixed 的 div，如下图所示。
I want it to be fixed vertically, but I want it to scroll horizontally with the rest of the content (notice the horizontal scroll bar).
我希望它垂直固定，但我希望它与其余内容一起水平滚动（注意水平滚动条）。
Is this possible with CSS? Or do I need Javascript (in this case, how could I do it)?
这可以用 CSS 实现吗？还是我需要 Javascript（在这种情况下，我该怎么做）？
回答by Fewfre
Old question, but I was also looking for a solution also, and found a nice simple jquery solution, and figured someone else might find it helpful if nothing else:
老问题，但我也在寻找解决方案，并找到了一个不错的简单 jquery 解决方案，并认为如果没有其他问题，其他人可能会发现它有帮助：
$(window).scroll(function(){
? ??$('#header').css('left', originalLeft - $(this).scrollLeft());
});
with header being the div, and originalLeft being, well, the initial left:position. This also works if someone scrolls and then zooms out, such that it would go where you would want it to.
header 是 div，而 originalLeft 是初始的 left:position。如果有人滚动然后缩小，这也有效，这样它就会去你想要的地方。
回答by Alessandro Pezzato
You need javascript. Here you can read a tutorial (with mootools): http://www.rickyh.co.uk/css-position-x-and-position-y/. Here a similar question, solved with jquery: CSS: fixed position on x-axis but not y?
你需要javascript。在这里您可以阅读教程（使用mootools）：http: //www.rickyh.co.uk/css-position-x-and-position-y/。这里有一个类似的问题，用jquery解决：CSS: fixed position on x-axis but not y?
回答by Dhaval Shukla
you can do it by css itself:
您可以通过 css 本身来完成：
<div style="width:250px; height:250px; border:solid;overflow:scroll; overflow-y:hidden">
<div style="width:500px; height:500px; border:solid;"></div>
</div>
