css - 如何启用特定 div 的滚动并禁用页面的滚动

Question

是否可以禁用页面滚动，只启用div页面内部的特定内容？

score 21 · Accepted Answer

禁用它使用：

css

.disableScroll{
      overflow-y:hidden;
      overflow-x:hidden;
}

只需添加<body class="disableScroll">到禁用

内联样式 <body style="overflow:hidden">

对于 div 使用，启用滚动<div style="overflow:auto;">

请记住，您可以使用overflow-y 进行垂直滚动，使用overflow-x 进行水平滚动属性

score 15 · Accepted Answer

可以只使用css解决方案吗？

如果是这样，只需将 overflow: hidden 添加到 body 和 overflow: auto 到可滚动的 div。

body {
  overflow: hidden;
}

#scroller {
  overflow: auto;
  height: 100px;
}

score 1 · Accepted Answer

对于整个页面：

body {
  height: 100%;
  width: 100%;
}

以 div 为例：

div.scroll {
    width:180px;
    height:170px;
    overflow:auto;

}

在 html 中：

<div class='scroll'></div>

score 0 · Accepted Answer

HTML：

<div class="scrollDisable"></div>

CSS：

.scrollDisable{
  overflow-y:hidden;
  overflow-x:hidden;

}

对于整个页面：

 body {
  height: 100%;
  width: 100%;
}

希望这会有所帮助。

4 回答 4