Question

我正在一个网站上工作，当点击一个按钮时，它会显示一个模态对话框。我希望背景不能滚动，但对话框是可滚动的，这是JSFiddle上的代码。我认为对话框应嵌入另一个div overflow设置为auto但不起作用。任何解决方案。？

UPDATE

从这张图片中，我希望红色区域可以滚动，同时保持绿色区域不可滚动。

Answer 1

我相信我能够获得您想要实现的功能。看起来这对你来说很困难的是你试图让一个滚动条跨越页面上的多个元素，并且标记中没有元素可以应用CSS规则。只需将要滚动的所有元素包装在容器中，并将该容器设置为overflow: auto（并从其他元素中删除溢出规则）。

修改

根据以下评论，我更新了小提琴。和以前一样，但现在可滚动的包装器就是主体本身。只有问题在于对话框中的CSS是position:fixed，但是您可能无法滚动相对于视口定位的内容。

Fiddle

Answer 2

我明白问题是如何使模式对话框的标题用滚动条垂直延伸而不是整个事物。

如果是这种情况，溢出方法是正确的;然而，溢出本身不能单独做到这一点。溢出喜欢有宽度和高度等朋友：）

因此，在您的情况下，您需要垂直溢出 - 溢出-y。

溢出-y需要一个高度才能工作。标题的高度可能是55px（这是你必须决定的）。

因此。将CSS添加到标题：

#dialog #title {
    overflow-y: auto;
    height: 55px;

}