代码之家 › 专栏 › 技术社区 › Mark Bolusmjak

如何在滚动时保持分层绝对div对齐?

css html

Mark Bolusmjak · 技术社区 · 5 年前

带有透明字体的透明文本区域是编辑组件。
它是在div上分层的,div从textarea获取其值并进行渲染。
编辑交互发生在textarea中,但视图来自底层div。

这样,我们可以呈现语法高亮显示的文本,同时维护textarea的编辑功能。

我的问题是我缺乏CSS方面的专业知识。因此,无论我尝试了多少种变体,换行、滚动或对齐都会出现问题。

下面提供的是一种变体。编辑器组件具有透明的灰色文本,而底层div是橙色文本,因此我们可以看到它们何时对齐。

挑战在于,无论内容、滚动或大小如何,都要让它们始终对齐。

function update(){
  document.getElementById("richtext").innerHTML = 
  document.getElementById("editor").value;
}

.scrollable {
  width: 300px;
  height: 100px;
  overflow: scroll;
  border : 1px solid grey;
}

.content {
  font-family: monospace;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  outline: none;
  resize: none;
  margin: none;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
  white-space: pre;
  display: block;
  overflow: none;
}

#richtext {
  z-index: -10;
  color: orange;
}

#view {
  height: 100%;
  position: relative;
  display: inline-block;
}

#editor {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background-color: transparent;
  color: #00000055;
  caret-color: black;
}

<div class="scrollable">
  <div id="view" class="content">
  <textarea id="editor" class="content" onInput="update();" class="content"></textarea>
  <div id="richtext" class="content"></div>
</div>
</div>

0 回复 | 直到 5 年前

Bryce Howitson 5 年前

你需要这个吗 textarea 和基础div?我最近想找一个好的富文本编辑器,注意到很多现代编辑器都使用了,只是一个div contenteditable="true" 作为HTML5属性。这里有一些 good examples 在现实世界中。

如果您真的需要坚持使用这两个元素,我会通过重置所有属性将它们分解为裸机:

textarea,
.preview {
  all: initial;
}

然后建立文本样式,使两者完全相同。 font-family , font-size , font-weight , line-height

问题是浏览器在textarea中对待文本呈现的方式与其他地方不同,因此其目标是通过有点苛刻来迫使它们保持一致。

Vikas Jadhav 5 年前

更改类别 .所容纳之物 min-height:100%; min-height:100vh; 也会改变 white-space: pre; white-space: pre-wrap;

function update() {
  document.getElementById("richtext").innerHTML =
    document.getElementById("editor").value;
}

.scrollable {
  width: 300px;
  height: 100px;
  overflow: scroll;
  border: 1px solid grey;
}

.content {
  font-family: monospace;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  overflow: hidden;
  min-width: 100%;
  min-height: 100vh;
  outline: none;
  resize: none;
  margin: none;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
  white-space: pre-wrap;
  display: block;
  overflow: none;
}

#richtext {
  z-index: -10;
  color: orange;
}

#view {
  height: 100%;
  position: relative;
  display: inline-block;
}

#editor {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #00000055;
  caret-color: black;
}

<div class="scrollable">
  <div id="view" class="content">
    <textarea id="editor" class="content" onInput="update();" class="content"></textarea>
    <div id="richtext" class="content"></div>
  </div>
</div>

babak golbaharan 5 年前

您可以更改空白值以获得更好的结果。

Manuel Otto 5 年前

为了避免这种情况,请更新textarea的高度,使其自动扩展。

function update(){
  richtext.innerHTML = editor.value;

  editor.style.width = 'auto';
  editor.style.width = editor.scrollWidth+'px';

  editor.style.height = 'auto';
  editor.style.height = editor.scrollHeight+'px';
}

var richtext = document.getElementById("richtext")
var editor = document.getElementById("editor")

function update(){
  richtext.innerHTML = editor.value;
  
  editor.style.width = 'auto';
  editor.style.width = editor.scrollWidth+'px';
  
  editor.style.height = 'auto';
  editor.style.height = editor.scrollHeight+'px';
}

.scrollable {
  width: 300px;
  height: 100px;
  overflow: scroll;
  border : 1px solid grey;
}

.content {
  font-family: monospace;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  outline: none;
  resize: none;
  margin: none;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
  white-space: pre;
  display: block;
  overflow: none;
}

#richtext {
  z-index: -10;
  color: orange;
}

#view {
  height: 100%;
  position: relative;
  display: inline-block;
}

#editor {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  background-color: transparent;
  color: #00000055;
  caret-color: black;
}

<div class="scrollable">
  <div id="view" class="content">
  <textarea id="editor" class="content" onInput="update();" class="content"></textarea>
  <div id="richtext" class="content"></div>
</div>
</div>

编辑:显然,宽度也是如此。