javascript - 文本区域输入和突出显示容器的同步滚动

Question

我正在尝试模仿 Highlight Within Textarea plugin 的一些行为没有实际使用它。

我已经很清楚高亮部分了，但是，当输入文本超出文本区域输入的可见区域时，高亮显示不正确。

问题是文本区域可以向下滚动，而高亮容器似乎不能滚动。我试图在 this approach 之后链接文本区域和突出显示容器的滚动条。 , 但不知何故它不起作用。

$('.linked').scroll(function() {
  $('.linked').scrollTop($(this).scrollTop());
});

.hwt-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}

.hwt-backdrop {
  position: absolute;
  top: 0;
  right: -99px;
  bottom: 0;
  left: 0;
  padding-right: 99px;
  overflow-x: hidden;
  overflow-y: auto;
}

.hwt-highlights {
  width: auto;
  height: auto;
  border-color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
  overflow: hidden;
}

.hwt-input {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font: inherit;
  overflow-x: hidden;
  overflow-y: auto;
}

.hwt-content {
  border: 1px solid;
  background: none transparent;
}

.hwt-content mark {
  padding: 0;
  color: inherit;
}

.linked {
  overflow: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Highlight Within Textarea test</h1>
<div class="hwt-container">
  <div class="hwt-backdrop" style="margin: 1px;">
    <div class="hwt-highlights hwt-content linked" style="padding: 0px; border-width: 0px;">This is <mark>test</mark> string which is not completely displayed in the visible area of <mark>textarea</mark> input.
    </div>
  </div>
  <textarea spellcheck="false" class="hwt-input hwt-content linked">This is test string which is not completely displayed in the visible area of textarea input.</textarea>
</div>

这是一个fiddle重现我的问题。

感谢任何帮助。

Answer 1

既然你想让高亮跟随滚动文本区域的内容，你只需要移动.hwt-highlights因此。这可以通过简单地给它一个 transform: translateY(<number>px) 来完成。 , 其中<number>只是当前 scrollTop 的负值文本区域的值:

$('.linked').scroll(function() {
  $('.hwt-highlights').css('transform', `translateY(${-this.scrollTop}px)`);
});

.hwt-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-text-size-adjust: none;
}

.hwt-backdrop {
  position: absolute;
  top: 0;
  right: -99px;
  bottom: 0;
  left: 0;
  padding-right: 99px;
  overflow-x: hidden;
  overflow-y: auto;
}

.hwt-highlights {
  width: auto;
  height: auto;
  border-color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
  overflow: hidden;
}

.hwt-input {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font: inherit;
  overflow-x: hidden;
  overflow-y: auto;
}

.hwt-content {
  border: 1px solid;
  background: none transparent;
}

.hwt-content mark {
  padding: 0;
  color: inherit;
}

.linked {
  overflow: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Highlight Within Textarea test</h1>
<div class="hwt-container">
  <div class="hwt-backdrop" style="margin: 1px;">
    <div class="hwt-highlights hwt-content linked" style="padding: 0px; border-width: 0px;">This is <mark>test</mark> string which is not completely displayed in the visible area of <mark>textarea</mark> input.
    </div>
  </div>
  <textarea spellcheck="false" class="hwt-input hwt-content linked">This is test string which is not completely displayed in the visible area of textarea input.</textarea>
</div>