如何克隆textarea的滚动移动

Question

我正在尝试复制div上的textarea行为。 特别是滚动位置。为了实现它，我创建了angular指令来绑定keyta和在textarea上滚动事件。如果其中一个触发我用textarea的scrollTop更新div的scrollTop。

预计会出现一个问题。当我输入多个换行符直到textarea上显示的滚动时，div的滚动位置不会更新到第一个类型。

我检查这两个都有不同的scrollHeight值。我相信这是问题所在。

这是证明问题的jsfiddle;

https://jsfiddle.net/4thxsx6w/8/

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);
        });

    }
}});