Question

我正在尝试使用此js库autosize和屏幕底部自动恢复的textarea之间创建一个100px的间隙。

链接中的演示展示了此问题。一旦到达屏幕底部，文本和窗口之间就没有空格。

似乎没有找到任何解决方案和边距和填充似乎没有解决这个问题。任何帮助表示感谢。

Answer 1

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

解决方案由javascript部分提供。

另一个注意事项 将是完全工作适合所有副本粘贴 - 终极解决方案，但而是精致的概念验证。由您来理解它的作用并对其进行更改以使其适用于您的具体情况。如果您在应用它时遇到任何问题，请询问/提供详细信息。

而且，正如 最后一个音符 一样，我在尝试使jQuery动画片在香草中添加scrollTo后却没有取得太大成功。最后我不想浪费更多时间，所以只使用了jQuery.animate()。如果您不需要平滑滚动到位置，或者如果您知道如何在vanilla中执行此操作，则应完全删除jQuery（因为autosizer也是独立的）。所以，如果你需要/想要它，我可以提供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>

如何保持autoresize textarea文本远离屏幕的最底层？

1 个答案: