html - CSS 定位，仅在垂直滚动时将内容保留在视口(viewport)内

Question

我不确定这是否可行，至少没有一些 JavaScript。我想要做的是将侧边栏中的内容保留在视口(viewport)内以进行水平滚动而不是垂直滚动(此问题发生在低分辨率下)。我整理了一个快速的 js fiddle 来演示这个问题 http://jsfiddle.net/evkhvvdr/非常感谢任何输入。

这是 CSS 或查看 js fiddle

body {
    position: relative;
    margin: 0;
}
.sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    background: blue;
    left: 0;
}
.sidebar-inner {
   position: fixed;
   left: 0;
}
.content {
   width: 1400px;
   background: pink;
   height: 2000px;
}

Answer 1

你可以在屏幕上固定 sidebar，但是把它放在 content 下，用 z-index，所以当你滚动时，你只滚动 content，sidebar 仍在屏幕上，但在 content 下。

body {
    margin: 0;
}
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    background: blue;
    z-index: 0;
}
.sidebar-inner {
    width: 100px;
    position: relative;
    left: 0;
}
.content {
    position: absolute;
    width: 1400px;
    background: pink;
    height: 2000px;
    margin-left: 100px;
}