Bind live 'scroll' listeners for textarea

Say we want to attach 'scroll' event handlers for textareas, but new ones might be added later on - Here's the trick.

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<button>MOAR TEXTAREAS!</button>
<textarea id="test">Try to scroll this line down</textarea>

CSS

textarea {
    height: 20px; overflow-y: scroll; display: block; margin: 5px; width: 175px;
    transition: all 150ms ease-in;
}

.scrolled {border-color: green; background: rgba(240,255,240,.4);}

JavaScript

const area = document.getElementById('test');
area.addEventListener('change',(e)=>console.log(e));