使 fixed div 能够水平滚动

Question

我的网站有一个固定宽度 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>

Answer 1

如果主包装器（设置为宽度：1024px 的包装器）没有 overflow: hidden 作为属性，您应该可以水平滚动。尝试手动设置为overflow: auto

Answer 2

Loot At This Real Example

你可以用overflow: scroll和固定位置设置包装器，并设置内部值，或你想要的特定样式

Answer 3

这就像将 overflow-x: auto 放在 header 中一样简单，宽度为 100%。

 .header { 
   overflow: auto;
 }

通过这种模式，您将拥有一个宽度为 100% 的 header，在小屏幕上您会看到它是如何缩小的。使用 header 内元素的硬像素定义（如 1024px），您的内容将具有此宽度，并且 parent 中的溢出允许您水平滚动它。

如果这不符合您的要求，也许您需要一个全局滚动解决方案，只需 javascript。

编辑

正如我们在评论中讨论的那样，您的解决方案是处理全局水平滚动并随内容移动固定 header，如相对或绝对 header。为此，您需要 javascript 来读取移动固定 header 所需的像素数。这是完整的代码：

// when scroll
$(window).on('scroll', function(e) {
    //calculate left position
    var left = $(this).scrollLeft();
    //apply to header in negative
    $('.header').css('left', -left);
});

你喜欢看到它工作吗？试试这个 fiddle:

http://jsfiddle.net/fbvat00q/

编辑 2

就您需要固定背景而言，您必须相对化 children 并将其定位在 javascript 中。所以你的最终代码将是：

CSS:

.headerbar {
      position: relative;
}

Javascript:

$(window).on('scroll', function(e) {
    var left = $(this).scrollLeft();
    $('.headerbar').css('left', -left);
});

看到它有效：

http://jsfiddle.net/fbvat00q/1/

Answer 4

要管理内容溢出具有固定尺寸的容器（垂直和水平）时的行为，您可以使用 CSS overflow property（有关详细信息，请参阅此 link）：

scoll : 内容溢出时滚动
hidden : 隐藏溢出的内容
visble : 看到溢出的内容，即使它不适合容器

在您的情况下，您必须将属性设置为 scroll

.selector{overflow: scroll}

如果只想管理水平溢出，可以设置overflow-xCSS属性.selector{overflow-x: scroll}

垂直溢出可以设置overflow-y,.selector{overflow-y: scroll}

Answer 5

尝试将溢出设置为水平滚动。例如：

.header {
    overflow-x: scroll;
}

如这里：W3C Link

使 fixed div 能够水平滚动

Making fixed div's able to horizontally scroll

html

css

scroll

css-position

编辑

编辑 2