Code Mirror is scrolling the web page to its wrapper. How to suppress this behavior?


I am making a toy environment to teach JavaScript. Here is the link to the current version. The HTML book has many chapters available through TOC (the TOC control is in the top right corner) and many textAreas to play with code. Currently, if you select a chapter (a bookmark) and reload the page, it gets positioned on the selected chapter.

I replaced the textAreas with CodeMirror instances. Everything mostly works, except after reloading, the browser scrolls the page to the first CodeMirror wrapper. Funnily, my script finds and converts textAreas from the bottom up, so, as the page loads, I see a fast backward movie where every CodeMirror wrapper appears and disappears. The first one is left, of course.

An excerpt of the next version - the one with CodeMirror – is available here. The top of the page is scrolled out after loading. Like before, please select a chapter from TOC (the TOC control is still in the top right corner). Reload the page, and it will position (but not focus) at the CodeMirror wrapper div.

I have ‘autofocus: false’ in the initialization object, and it works. I could not find anything else.


Initializing CodeMirror does not, by default, scroll the page to the editor, unless it is getting focused. (I just tried this with a simple page that converts a textarea at its bottom, out of view, to a CodeMirror instance. The scroll position stayed at the top of the page. So this may be related to something else that you are doing.


Thank you very much, I am actively investigating. I hoped I missed an initialization parameter. Thank you again for this confirmation.