sync scrolling of textarea input and highlighting container

Question

I am trying to mimic some of the behavior of the Highlight Within Textarea plugin without actually using it.

I have pretty much figured out the highlighting part, however, when the input text exceeds the visible area of the textarea input, the highlighting is not displayed properly.

The problem is that the textarea can be scrolled down, while the highlighting container does not seem to be scrollable. I tried to link the scrollbars of both the textarea and the highlighting container following this approach, but somehow it is not working.

$('.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>

Here is a fiddle reproducing my problem.

Any help appreciated.

what is your condition to highlight? is it any specific word or 3rd word of the textarea? — Ritesh Dhoke, Jan 03 '20 at 12:06
My example is a static one, without a dynamic condition to highlight things. I tried to make the example on point to the "scrolling" problem abstracting from the rest. — TimTeaFan, Jan 03 '20 at 12:29

score 1 · Accepted Answer · answered Jan 03 '20 at 12:14

Since you want the highlights to follow the content of the scrolled textarea, all you need is to move .hwt-highlights accordingly. This can be done by simply giving it a transform: translateY(<number>px), where <number> is simply the negative value of the current scrollTop value of the textarea:

$('.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>

sync scrolling of textarea input and highlighting container

1 Answers1

Linked