Highlight Textarea Scroll

by TimTeaFan

HTML

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

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

JavaScript

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