自动扩展文本区域后跳转滚动条

Question

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

有什么想法吗？

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

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

在不相关的笔记上。我还删除了高度更改 jQuery 上的+ offset，因为它不断向文本区域添加不需要的额外高度。这样做会在 textarea 上添加一个滚动条，因此我在 CSS 中将 textarea 设置为 overflow:hidden。

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>

Answer 2

您可以使用$(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>