如何仅在一个Div中制作卷轴

发布于 2025-01-18 15:22:27 字数 550 浏览 2 评论 0原文

我想在页面中添加两个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，我们可以输入，然后如果我们继续按Enter，它将显示垂直滚动条，但是如果我滚动，顶部的div也将滚动，我想要的避免。

那么，如何将滚动条仅应用于下部div？

原文

I want to add two Div in the page, one Div for the top part, which is ready-only, the other one Div for the lower part, which is editable. What I want to achieve is:

Make the lower Div editable and scrollable if content is too long.
While scrolling the lower Div, the top Div should stay at the same position

Here is the code I have:

<html>
<body>

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

In the code above, if I click on the lower Div, we can then type, then if we keep pressing Enter, it will show the vertical scroll bar, but if I scroll, the top Div will be scrolled up too, which I want to avoid.

So, how can I make the scroll bar only applied to the lower Div?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

偷得浮生 2025-01-25 15:22:27

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

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

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

您可以通过使用窗口高度作为限制器来避免为可滚动区域设置特定高度。一种方法是使用 Flexbox，以便可滚动区域填充剩余的窗口高度。这是一个示例。在您的情况下，可以是“外部”弹性盒容器。

在下面的演示中，分为两个区域：顶部区域和填充剩余窗口高度的底部“可滚动容器”区域。底部区域限制可编辑/可滚动区域的最大高度。

我还添加了此处讨论的“占位符”技术：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>

The scrollbar currently gets applied to the entire window, so all elements on the page scroll up and down together. One alternative is to make the editable area scrollable. Restrict the height of that area and set its overflow to "auto" or "scroll".

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

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

You can avoid setting a specific height for the scrollable area by using the window height as the limiter. One method is to use flexbox so that the scrollable area fills the remaining window height. Here's an example. In your case, the <body> can be the "outer" flexbox container.

In the demonstration below, the <body> is split into two areas: the top area and a bottom "scrollable-container" area that fills the remaining window height. The bottom area limits the maximum height of the editable/scrollable area.

I also added a "placeholder" technique discussed here: 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>

回复收藏 0 原文

情归归情 2025-01-25 15:22:27

如果您希望顶部部分始终在顶部可见，则可以使用 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>

If you mean that you want the top part to always be viewable at the top, you can use 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>

回复收藏 0 原文

空袭的梦i 2025-01-25 15:22:27

你可以这样做：

.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>

You could do somthing like this:

.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>

回复收藏 0 原文

~没有更多了~