如何使自动调整文本区域文本远离屏幕底部？

Question

我正在尝试在使用此 js 库 autosize 自动调整大小的文本区域与屏幕底部之间创建一个 100 像素的间隙。

link 中的演示展示了这个问题。一旦您到达屏幕底部，文本和 window.

之间就没有 space

似乎无法找到任何解决方案，边距和填充似乎无法解决此问题。任何帮助表示感谢。

Answer 1

一个重要说明是，为了工作，下面的脚本需要flow-content 在 height 中价值 100px 的 <textarea> 元素之后。如果没有它，它就不能 scroll 在那里，所以它不起作用。我通过在 <body> 上设置 padding-bottom:100px 来提供此 scroll-space，但是如果您在 <textarea> 之后有足够的内容来提供滚动 [=64] 的 100px =]，不需要填充。其实，所有的CSS主要是为了演示原理，你不应该把它添加到你的项目中。

解决方案由javascript部分提供。

另一个注意事项 这不是 fully-working-fit-all-copy-paste -终极解决方案，而是精细的概念验证。您需要了解它的作用并对其进行更改以使其适用于您的特定情况。如果您在应用时遇到任何问题，只需 ask/provide 详细信息。

并且，作为最后的注释，我只是在尝试获得[=24=之后才添加jQuery ] 香草动画效果不佳。最后我不想浪费更多的时间所以就用了jQuery.animate()。如果您不需要平滑滚动到位置或者如果您知道如何在原版中执行此操作，则应完全删除 jQuery （因为 autosizer 也是独立的）。所以，如果你 need/want 它，我可以提供一个 jQuery 免费的非动画解决方案。

这里是：

autosize(document.querySelectorAll('textarea'));

$('textarea').each(function(){
  autosize(this);
}).on('autosize:resized', function(){
  let fromBottom = $(window).height() - this.clientHeight;
  if (fromBottom < 102) {
    $('html, body').stop().animate({
      scrollTop:(102 - fromBottom) + 'px'
    }, 210);
  }
});

textarea {
  width: 80%;
  margin-left: 10%;
}
body {
  padding-bottom: 100px;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  
}
body::before {
  left: 0;
  width: 100%;
  position: fixed;
  bottom: 100px;
  content: '';
  display: block;
  border-bottom: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>


<textarea>test textarea</textarea>

如何使自动调整文本区域文本远离屏幕底部？

How to keep autoresize textarea text away from the very bottom of screen?

javascript

jquery

html

css

autosize