Always scroll textarea to the bottom

I want the last line of a textarea to always be displayed even when text is added

When you add lines to a textarea, it stays at the current scroll position, so I want it to always display (follow) the last line.

Scrolling to the last line

Implementation using Vanilla JS

Vanilla JS

var selectTextarea = document.getElementById('id_of_the_textarea_you_want_to_select');
selectTextarea.scrollTop = selectTextarea.scrollHeight;

See below:
https://www.web-dev-qa-db-ja.com/ja/javascript/更新時にテキストエリアを下にスクロールし続ける方法/940045205/

Implementation using jQuery

example_program.js

var selectTextarea = $('#id_of_the_textarea_you_want_to_select');
selectTextarea.scrollTop(
    selectTextarea[0].scrollHeight - selectTextarea.height()
);

See below:
https://www.web-dev-qa-db-ja.com/ja/javascript/更新時にテキストエリアを下にスクロールし続ける方法/940045205/

However, another way of writing it using jQuery from the referenced page:

$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);

did not work in my environment.

I don't know if the problem is with this program or with me, or if there is something that should be done when running it in a Chrome extension, so if anyone knows anything, please leave a comment.

Results

It now consistently follows the last line of the textarea.

Reference Pages

I referred to the following. Thank you.
https://gist.github.com/taoyag/2137278/revisions
https://www.web-dev-qa-db-ja.com/ja/javascript/更新時にテキストエリアを下にスクロールし続ける方法/940045205/

Related Pages

https://www.chickensblog.com/ee-npc-not-spawn/
https://www.chickensblog.com/scratch-cant-fool/
https://zenn.dev/teba_eleven/articles/520fbdb1951765
https://zenn.dev/teba_eleven/articles/ab4f620d1607e4