sync scrolling of textarea input and highlighting container

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

Here is a fiddle reproducing my problem.

Any help appreciated.

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->