Question:
When a textbox is focused with Javascript, is there a way to tell the browser to NOT scroll to the current cursor position?
Goal:
I want to scroll a textarea, and navigate around its text, using buttons. But clicking a button causes the textarea to lose focus. So I have an event listener that listens for ‘blur’ and applies ‘focus’.
Example:-
Situation: I’m looking at the top of the text, but the cursor is in the middle. The textarea is focused. I click my scroll-to-the-bottom button which executes this
txtarea.scrollTo({top: txtarea.scrollHeight, behavior: "smooth"});
Result: The textarea loses focus. The event listener fires and re-focuses the textarea. The textarea scrolls (an instant jump) to show the cursor. The scrollTo then executes and the textarea smoothly scrolls to the bottom of the text.
Minimum working example (Chromium and Firefox):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea rows="20" cols="30" id="textbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac tellus a tortor aliquam placerat in tincidunt neque. Fusce a sapien lacus. Aliquam suscipit condimentum tempor. Vestibulum dignissim turpis in ipsum rhoncus, sed porttitor urna suscipit. Phasellus varius diam at elit eleifend dignissim. Donec id condimentum tellus, vitae elementum ex. Fusce scelerisque, nisl vel condimentum hendrerit, nulla magna dictum lacus, ac euismod metus ipsum at felis. Curabitur rutrum molestie accumsan. Cras vitae lobortis metus.
Curabitur gravida, erat ut congue ullamcorper, metus nibh auctor ex, a ultricies libero elit quis risus. In gravida ipsum a mi interdum egestas. Nam eu ante molestie, semper mi vitae, hendrerit ligula. Duis ac semper orci. Vestibulum sapien nunc, eleifend id gravida a, aliquet quis erat. Vestibulum porttitor vel neque sed vehicula. Aliquam dignissim lorem tortor, eget rhoncus tortor rutrum nec. Nunc aliquam nisi sed mauris condimentum lacinia. Suspendisse tristique luctus vulputate. Integer efficitur, sem in iaculis porttitor, risus arcu consequat tellus, quis ultrices eros libero vitae elit. Aenean diam ipsum, fringilla sed arcu sed, blandit posuere justo. Maecenas porttitor est quis commodo sollicitudin.
Sed justo nibh, gravida id velit dignissim, aliquet viverra lacus. In non ligula luctus, malesuada justo quis, placerat velit. Nullam justo massa, blandit a sapien nec, pellentesque gravida nisl. Sed pellentesque sit amet nunc molestie egestas. Nullam ultrices orci non sagittis maximus. Vestibulum cursus vel velit malesuada mollis. Sed dapibus, massa quis suscipit dictum, ligula metus vehicula est, vel tincidunt magna quam ut orci. Aenean aliquet rutrum metus et finibus.
</textarea>
<script>
const txtarea = document.getElementById("textbox");
setTimeout(() => {
txtarea.focus();
}, 8000);
</script>
</body>
</html>
Load the page, scroll the textarea about half way down, click in the text, scroll back to the top, click outside the textarea.
After a few seconds, the textbox will receive focus and immediately scroll to make the cursor position visible.