When I was looking for a live-preview inline Markdown editor for a project - live editing within an HTML page - I came across this one. The feature that interested me the most was scrollspy: when you scroll the input <textarea>, the preview <textarea> scrolls with it. This is very convenient, as the project in question relies on comfortable writing.
The problem I'm having is that such scrollspy uses jQuery, which I'm not comfortable with. One of my main points is to make the project as quick to load and responsive as possible, and jQuery minified increases the local machine loading time by ~100 ms - which, I imagine, translates into even more loading time online. I already have ~300 ms local loading time and if I have to increase it, I'd prefer to do so only when necessary.
Still, I find the text scrollspy feature very attractive and am looking for a way to implement it without relying on jQuery. I'm looking for the simplest and quickest, performance-wise, way to achieve that, using the tools already at my disposal.
I'm using AngularJS, Commonmark parser for Markdown, angular-commonmark.js (which allows me to parse any tag's input as Commonmark) and UI Bootstrap (a Twitter Bootstrap clone built solely with Angular).
EDIT: it turned out, during experimentation, that placing Angular-Commonmark attribute onto <textarea> outputs raw HTML to the <textarea> rather than Marked-down text (i.e., <h1>Text</h1> rather than a bold and big "Text"). I was using <div> to test the output and it worked just fine. Would that disallow me to use scrollspy (since <div>s are unscrollable)?
