How to scroll to automatically scroll to the bottom of an editable div onload

Question

How can I get an editable div to remember the position of the scroll bar? Im currently programming a Chrome extension and have a notepad style editable div which users can write notes in. I have the code listed below currently which autofocuses the div onload and displays the caret at the end of the text within the div.

I now just need my scroll bar to scroll level with the caret if its further down the div.

    var div = document.getElementById("edit_notepad");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            range.collapse(false);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.collapse(false);
            range.select();
        }
    }, 1);
};

div.focus();

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You may want to try the different approaches done in Scroll to bottom of Div on page load (jQuery) and choose which best suits your concern.

One suggested solution is to scroll down to the height of the div as suggested by @Mike Todd

Correct version:

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

This related SO post might also help.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 09 '16 at 12:08

Teyam

7,686
3
15
22

score 0 · Answer 2 · answered Nov 08 '16 at 20:52

Why don't you try some simple localStorage?

var position = localStorage.position || 0;
div.scrollTop = position;
localStorage.setItem("position", div.scrollTop);

The code above should get and set the position of the div scroll amount, as far as I know.

How to scroll to automatically scroll to the bottom of an editable div onload

2 Answers2