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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

＆＃13;

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

＆＃13;

.jTextarea {
  overflow:hidden;
}

＆＃13;

<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>

＆＃13;

自动扩展textarea后跳转滚动条

2 个答案: