Javascript 如何克隆文本区域的滚动移动

我试图在div上复制一个textarea行为。 尤其是滚动位置。为了完成它，我创建了angular指令来绑定keyup和textarea上的滚动事件。如果其中一个触发，我将用textarea的scrollTop更新div的scrollTop

它只适用于一个问题。当我输入多个换行符直到文本区域显示滚动时，div的滚动位置直到第一次输入才更新

此时，我检查两者是否具有不同的scrollHeight值。我相信这就是问题所在

下面是演示这个问题的JSFIDLE

---

当你输入一条新的线时，DIV没有考虑到最后一行的线高度，直到你把一些内容放在那里。是的，它看起来是原因，有任何建议来克服问题吗？潜入一些不可见的内容，测量一下，然后把它拿出来。

myApp.directive("scrollBottom", function () {
return {
    link: function (scope, element, attr) {

        var id = $("#" + attr.scrollBottom);
        $(element).on("scroll", function () {
            id.scrollTop(this.scrollTop);
            console.log("scroll:" + this.scrollTop);
        });

        $(element).on("keyup", function () {
            console.log("keyup:" + this.scrollTop);
            id.scrollTop(this.scrollTop);
        });

    }
}});