Javascript 滚动位置变得混乱

我已经在textarea中设置了按键时自动扩展textarea事件，但当它开始增长时，外部div滚动条在按键时下降，然后上升。即使我在文本区域中按键滚动（向下）底部（外部div滚动），它也会转到顶部（向上）。我怎样才能解决这个问题

请参阅以下JSFIDLE链接

$("textarea").on("keyup", function($event) {
    $(".parent").scrollTop($(".parent").prop("scrollHeight"));
var textarea = $event.currentTarget;
            if (textarea.scrollHeight > 305) {
                textarea.style.height = "100px";
                textarea.style.height = (3+textarea.scrollHeight)+"px";
                $(textarea).css("overflow-y","scroll");
                //$(".scrollablePanel").scrollTop($(".scrollablePanel").prop("scrollHeight"));
            }
            else if (textarea.scrollHeight > 105){
                $(textarea).css("overflow-y","hidden");
                textarea.style.height = "100px";
                textarea.style.height = (3+textarea.scrollHeight)+"px";
                //$(".scrollablePanel").scrollTop($(".scrollablePanel").prop("scrollHeight"));
                $('.scrollablePanel').scrollTop($('.scrollablePanel').scrollTop() + 14);
            }
});

---

为什么需要滚动条？因为在我的应用程序中，内容的高度大于div的高度，如果我不添加滚动条，滚动条文本区域将在增长时隐藏。