Наложение div на textarea для выделения текста – выравнивание нарушается при прокрутке до конца вправо ⇐ CSS

[Anonymous]

Я хочу иметь возможность выделять совпадения в редактируемом пользователем тексте, поэтому я решил выполнить стандартное упражнение: создать , который плавает над текстовой областью, и выделить текст в этом div. >
У меня получилось почти идеально примерно за 30 минут, так что я почти доволен. Проблема в том, что при прокрутке вправо/вниз выравнивание нарушается.
Попробуйте, это довольно аккуратно, за исключением одной маленькой ошибки. Как только вы прокрутите текстовую область до конца, выравнивание между текстом в текстовой области и моим наложенным элементом div нарушится.

Код: Выделить всё

class TextareaOverlay {
/**
*
* @param {HTMLDivElement} container
*/
constructor(container) {
/** @type {HTMLTextAreaElement} */
this.textarea = container.querySelector("textarea");
/** @type {HTMLDivElement} **/
this.overlay = document.createElement("div");
this.overlay.classList.add("overlay");
container.appendChild(this.overlay);

this.textarea.addEventListener("input", this.inputHandler.bind(this));
this.textarea.addEventListener("scroll", this.scrollHandler.bind(this));
this.inputHandler();
this.sizeHandler();
this.scrollHandler();
this.resizeObserver = new ResizeObserver(this.sizeHandler.bind(this));
this.resizeObserver.observe(this.textarea);
}
inputHandler() {
const text = this.textarea.value;
this.overlay.textContent = text;
}
scrollHandler() {
this.overlay.scrollTop = this.textarea.scrollTop;
this.overlay.scrollLeft = this.textarea.scrollLeft;
}
sizeHandler() {
const rect = this.textarea.getBoundingClientRect();
this.overlay.style.width = rect.width+"px";
this.overlay.style.height = rect.height+"px";
}
};
const textareaHelper = new TextareaOverlay(document.querySelector(".textarea-overlay"));

Код: Выделить всё

div.textarea-overlay {
position: relative;
}
div.textarea-overlay textarea {
width: 100%;
height: 100%;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
background-color: #f8f9fa;
margin: 0;
box-sizing: border-box;
overflow: scroll;
white-space: pre;
font-size: 1em;
}
div.textarea-overlay div.overlay {
margin: 0;
position: absolute;
font-size: 1em;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
white-space: pre;
font-family: 'Courier New', Courier, monospace;
pointer-events: none;
overflow: hidden;
box-sizing: border-box;
border: 1px solid transparent;
}

Код: Выделить всё

div.textarea-overlay {
position: relative;
}
div.textarea-overlay textarea {
width: 100%;
height: 100%;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
background-color: #f8f9fa;
margin: 0;
box-sizing: border-box;
overflow: scroll;
white-space: pre;
font-size: 1em;
}
div.textarea-overlay div.overlay {
margin: 0;
position: absolute;
font-size: 1em;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
white-space: pre;
font-family: 'Courier New', Courier, monospace;
pointer-events: none;
overflow: hidden;
box-sizing: border-box;
border: 1px solid transparent;
}

Итак, вопрос в том, как решить проблему прокрутки. Бонусные баллы, если вы также знаете, как мне отобразить текстовый курсор в наложении, если я захочу полностью скрыть исходный текст.

Подробнее здесь: https://stackoverflow.com/questions/792 ... when-scrol