使固定 div 能够水平滚动
Cal*_*non 0 html css scroll css-position
我的网站有一个固定的宽度，1024px以便更容易实现较小的屏幕，显示的页眉和页脚位于固定位置。
但是，当用户的宽度小于1024px页眉和页脚时，会被截断，这很好。但是，您无法水平滚动以查看其余部分。
我想解决这个问题与 . 相关CSS，但是我不确定要更改/使用哪些属性。
页面的构造如下：
<body>
<div class='header'>
<div class='headerbar'>
<div class='headerleft'><h1>BMRA Web Client</h1></div>
<div class='headerright'><!--image here--></div>
</div>
</div>
<div class='footer'>
<div class='headerbar'>
<div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
</div>
</div>
</body>
这就像overflow-x: auto在标题中放置100% 宽度一样简单。
.header {
overflow: auto;
}
通过这种模式，您将拥有一个 100% 宽度的标题，在小屏幕中您将看到它是如何缩小的。使用标题内元素的硬像素定义（如 1024 像素），您的内容将具有此宽度，并且父级中的溢出允许您水平滚动它。
如果这不符合您的要求，也许您需要一个全局滚动解决方案，只需使用 javascript 即可完成。
编辑
正如我们在评论中所说，您的解决方案将是处理全局水平滚动并随内容移动固定标题，例如相对或绝对标题。为此，您需要使用 javascript 来读取移动固定标题所需的像素数。这是完整的代码：
// when scroll
$(window).on('scroll', function(e) {
//calculate left position
var left = $(this).scrollLeft();
//apply to header in negative
$('.header').css('left', -left);
});
你喜欢看到它工作吗？试试这个小提琴：
编辑 2
至于你需要固定背景，你必须相对化孩子并在javascript中定位它。所以你的最终代码将是：
CSS：
.headerbar {
position: relative;
}
Javascript：
$(window).on('scroll', function(e) {
var left = $(this).scrollLeft();
$('.headerbar').css('left', -left);
});
看到它工作：
http://jsfiddle.net/fbvat00q/1/