如何在一个 div 中制作滚动条

Question

我想在页面中添加两个Div，一个Div用于顶部，这是只读的，另一个Div用于底部，它是可编辑的。我想要实现的是：

如果内容太长，请将下方 Div 设置为可编辑和可滚动。
滚动下方 Div 时，上方 Div 应保持在同一位置

这是我的代码：

<html>
<body>

<div>
<div>Top Part</div>
<div contenteditable="true">Click here to type</div>
</div>
</body>
</html>

在上面的代码中，如果我点击下面的Div，然后我们可以输入，然后如果我们一直按回车，它会显示垂直滚动条，但是如果我滚动，顶部的Div 也会向上滚动，我想避免这种情况。

那么，如何让滚动条只作用于下层Div？

Answer 1

滚动条当前应用于整个 window，因此页面上的所有元素一起上下滚动。一种替代方法是使可编辑区域可滚动。限制该区域的高度并将其 overflow 设置为“自动”或“滚动”。

.edit {
  max-height: 5em;
  overflow-y: auto;
}

<div>
  <div>Top Part</div>
  <div contenteditable="true" class="edit">Click here to type</div>
</div>

您可以通过使用 window 高度作为限制器来避免为可滚动区域设置特定高度。一种方法是使用 flexbox，使可滚动区域填充剩余的 window 高度。。在您的情况下，<body> 可以是“外部”flexbox 容器。

在下面的演示中，<body> 被分成两个区域：顶部区域和填充剩余 window 高度的底部“scrollable-container”区域。底部区域限制了editable/scrollable区域的最大高度。

我还添加了此处讨论的“占位符”技术：Placeholder for contenteditable div。

html,
body {
  margin: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #EEF;
}

.scroll-container {
  flex: 1;
  min-height: 1em;
}

.scrollable {
  max-height: 100%;
  overflow-y: auto;
}

.header,
.scrollable {
  padding: 0.5em;
  box-sizing: border-box;
}

[contenteditable=true]:empty:before {
  content: attr(data-placeholder);
  color: grey;
  font-style: italic;
  cursor: text;
}

<div class="header">Top Part</div>
<div class="scroll-container">
  <div contenteditable="true" class="scrollable" data-placeholder="Click here to type"></div>
</div>

Answer 2

如果您的意思是希望顶部始终在顶部可见，您可以使用 position: sticky。

.sticky {
    font-size: 2em;
    position: sticky;
    top: 0;
}

[contenteditable=true] {
    border: 0.1em solid black;
}

<html>
    <body>
        <div>
            <div class="sticky">Top Part</div>
            <div contenteditable="true">Click here to type</div>
        </div>
    </body>
</html>

Answer 3

你可以这样做：

.scrollable{
  overflow-y: scroll;
  max-height: 150px;
}

    <html>
    <body>

    <div>
    <div>Top Part</div>
    <div class="scrollable" contenteditable="true">Click here to type</div>
    </div>
    </body>
    </html>

如何在一个 div 中制作滚动条

How to make scrollbar in one div only

html

javascript

css

overflow