Question

[请将这个问题转换为自我解答的问题]

如果元素离开屏幕，则会出现滚动条，以便用户可以滚动到元素的屏幕外部分。 This Fiddle说明了我的观点。

但是，如果元素position设置为fixed，则不会显示滚动条。检查此fiddle。即使div离开屏幕，也没有滚动条。因此，默认情况下，fixed内容不可滚动。

现在，fixed元素的这种行为在许多情况下非常有用。例如，如果您正在制作社交媒体网站，例如Facebook，您可能需要一个三栏布局，其中最左侧的列（可能会显示用户的个人资料图片，他/她的名字等等） on）和最右边的列（例如可能显示广告）是固定的，而中间列（包含所有帖子）是relative，如下所示：

请注意此图像右侧显示的垂直滚动条。如果用户向下滚动，则只有中间列会滚动。最左侧和最右侧的列是固定的，它们不会滚动（这样，当用户向下滚动时，您的广告就不会消失）。

（你可以找到这个3列布局的小提琴here。注意：你可能需要调整输出窗口的大小才能看到最右边的div）

但是，最左侧和最右侧fixed的{{1}}性质会产生一个小问题。看看这张图片：

我调整了窗口的大小。最右边的div屏幕外，但没有水平滚动条，即没有办法访问右侧div的屏幕外部分。具有讽刺意味的是，div内容的相同行为使其变得有用，现在正在阻碍用户体验。

幸运的是，我们可以通过一些javascript解决这个问题：

fixed

看看这个更新的fiddle。现在，滚动条完美运行。另请注意，我已经对此小提琴的function position(element) { var data = element.getBoundingClientRect(); return data.left; } window.addEventListener('scroll', function() { var mainContentPosition = position(document.getElementById('MainContent')); if(mainContentPosition<=208) { var diff = 208 - mainContentPosition; document.getElementById('LeftContent').style = 'margin-left: -' + diff + 'px;'; document.getElementById('RightContent').style = 'margin-left: ' + (744-diff) + 'px;'; } }); window.addEventListener('resize', function() { if(window.innerWidth>=1020) { document.getElementById('LeftContent').style = 'margin-left: 0px;'; document.getElementById('RightContent').style = 'margin-left: 744px;'; } });进行了一些编辑（这些脚本是完成其工作所必需的）。我为.css div设置了overflow到auto和height到100%。

顺便说一句，如果你想知道，那就没有CSS的方法来实现这一点（据我所知）。

Answer 1

我认为你的意思是横向滚动条，对吗？在这种情况下，请使用overflow-x。

body {
    overflow-x: auto;
}

Answer 2

编辑2：

位置：固定 - 该元素将从普通文档流中删除，并且不会为页面布局中的元素创建空间。

链接：https://developer.mozilla.org/en-US/docs/Web/CSS/position

编辑：此外，我现在唯一能想到的是：

#Content { position: relative;}
.RightContent {position: absolute; right: 0px;}

完整代码：

body {
    overflow-y: auto;
}
#LeftContent {
    position: fixed;    /*Delete this to make LeftContent scrollable*/
    overflow:hidden;
    float: left;
    width: 200px;
    padding-right: 10px;
    padding-left: 3px;
    z-index: -1;    /*Delete this to make LeftContent scrollable*/
}
#MainContent {
    float: left;
    width: 522px;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 1px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 200px; /*Delete this to make LeftContent scrollable*/
}
#RightContent {
  right: 0px;
    position: absolute; /*Delete this to make RightContent scrollable*/
    overflow:hidden;
    width: 250px;
    padding-left: 10px;
    padding-right: 3px;
    margin-left: 744px; /*Delete this to make RightContent scrollable*/
    z-index: -1;    /*Delete this to make RightContent scrollable*/
}
#Content {
  position: relative;
    color: #383838;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    width: 2020px;
}

使固定元素可滚动（使用javascript）

2 个答案: