Question

我有一个位于我体内的定位菜单，并通过用户可以点击的页面上的按钮进行隐藏和显示。我遇到的问题是这个菜单可以变得相当大（它通过服务器提取动态内容），有时它会比主体更长，但是当它溢出页面底部时，页面不会展开以滚动它（它被切断了。）

我试过

body{
overflow-y: scroll;
}

似乎没有影响它。这是项目本身的css（sass）。

.globalMenu
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
@media screen and (max-width: 600px)
    width: 100%
    margin-left: 0
    left: 0

所以我不确定我在这里失踪了什么 - 关于固定工作怎么样？谢谢你的阅读！

Answer 1

固定项目从文档流程中删除，因此即使其尺寸超过视口的尺寸，包含元素（无论是<body>还是其他任何后代）都无法容纳它带有滚动条。

换句话说， <body>元素无法访问position: fixed元素的维度，因此在主体上分配溢出属性不会具有允许用户访问所述元素的隐藏内容的任何效果。

而是将overflow-y: auto属性分配给固定元素：

.globalMenu
overflow-y: auto;
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
@media screen and (max-width: 600px)
    width: 100%
    margin-left: 0
    left: 0

请参阅此处的概念验证小提琴：http://jsfiddle.net/teddyrised/38bsqLsb/1/

css，固定项目不会导致身体滚动（被切断）

1 个答案: