自动扩展textarea后跳转滚动条

Question

我有一个自动扩展textarea。 粘贴极长文本（长于窗口高度）时，后续键入会导致浏览器滚动条跳转。 尝试在底部键入时会发生这种情况，因为文档高度也在增长。

想法，有人吗？

Codepen： https ：//codepen.io/btn-ninja/pen/bRVKYe

function growTextarea (i,elem) {
    var elem = $(elem);
    var offset = elem.prop('offsetHeight') - elem.prop('clientHeight');
     var resizeTextarea = function( elem ) {
        elem.css('height', 'auto').css('height', elem.prop('scrollHeight') + offset );            
    };
    elem.on('input', function() {
        resizeTextarea( $(this) );
    });
    resizeTextarea( $(elem) );
}

$('.jTextarea').each(growTextarea);

Answer 1

你可以使用$(window).scrollTop(elem.prop('scrollHeight')); 强制窗口滚动到元素的底部。

 function growTextarea (i,elem) { var elem = $(elem); var offset = elem.prop('offsetHeight') - elem.prop('clientHeight'); var resizeTextarea = function( elem ) { elem.css('height', 'auto').css('height', elem.prop('scrollHeight') + offset ); $(window).scrollTop(elem.prop('scrollHeight')); }; elem.on('input', function() { resizeTextarea( $(this) ); }); resizeTextarea( $(elem) ); } $('.jTextarea').each(growTextarea); 

 <form style="width:500px; margin:20px auto;"> <small>Known issue: When pasting extremely long text (longer than window height), subsequent typing causes the browser scrollbar to jump.</small><br> <textarea rows="1" class="jTextarea"></textarea> </form> 

Answer 2

这比我上一次尝试要好，即使我在这里得到了解决方案:)。 这基本上是在调整大小之前存储滚动位置，然后在调整textarea大小之后将这些值重新应用到滚动位置。

在一个无关的说明。 我还删除了高度变化jQuery上的+ offset ，因为它继续向textarea添加不需要的额外高度。 这样做会在textarea上添加一个滚动条，所以我将textarea设置为overflow:hidden在CSS中。

https://codepen.io/anon/pen/QgjVWY

 function growTextarea (i,elem) { var elem = $(elem); var offset = elem.prop('offsetHeight') - elem.prop('clientHeight'); var resizeTextarea = function( elem ) { // two additional variables getting the top and left scoll positions. var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft; var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop; elem.css('height', 'auto').css('height', elem.prop('scrollHeight') ); // Applying previous top and left scroll position after textarea resize. window.scrollTo(scrollLeft, scrollTop); }; elem.on('input', function() { resizeTextarea( $(this) ); }); resizeTextarea( $(elem) ); } $('.jTextarea').each(growTextarea); 

 .jTextarea { overflow:hidden; } 

 <form style="width:500px; margin:20px auto;"> <small>Known issue: When pasting extremely long text (longer than window height), subsequent typing causes the browser scrollbar to jump.</small><br> <textarea rows="1" class="jTextarea"></textarea> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>