自动扩展文本方面后跳跃滚动条

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

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

在不相关的音符上。我还删除了高度更改jQuery上的+ offset，因为它一直在为Textarea添加不需要的额外高度。这样做在Textarea上添加了一个滚动条，因此我将Textarea设置为CSS中的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>