Question

＆＃13;

$('textarea').on('input', function() {
  var scrollHeight = parseInt($(this).prop('scrollHeight'));
  $(this).height(scrollHeight);
  $(this).prev('.Content').outerHeight(300 - $(this).outerHeight());
 
  
});

$(".Content").scrollTop($('.Content').height())

＆＃13;

.OuterDiv
{
  width:200px;
  height:300px;
  border:1px solid #000;
  position:relative;
  }
.Content
{
  width:200px;
  max-height:250px;
  background-color:grey;
  overflow:auto;
  }
.text
{
  resize:none;
  position:absolute;
  bottom:0;
  left:0;
  width:194px;
  height:45px;
  max-height:145px;
  background-color:rgba(250, 120, 30,1);
  font-size:16px;
  font-family:Arial;
  overflow:auto;
  word-wrap:break-word;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
  <div class="Content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <textarea class="text" placeholder="Write some text..."></textarea>
</div>

＆＃13;

早上好，

当我在文本区域中写入文本时，您是否知道如何使滚动条仍然位于底部（文本区域在添加文本时增加到最多）。刷新页面滚动条位于底部，但不是在添加文本时

Answer 1

我在SO post找到了答案。每次键入时，您都想再次滚动到底部以确保您位于.Content的底部。

对于有意在内容中向上滚动的用户而言，这可能会令人讨厌，因此您应该为此添加额外的检查。

＆＃13;

$('textarea').on('input', function() {
  var scrollHeight = parseInt($(this).prop('scrollHeight'));
  $(this).height(scrollHeight);
  $(this).prev('.Content').outerHeight(300 - $(this).outerHeight());
  $('.Content').scrollTop($('.Content')[0].scrollHeight);
  
});

$('.Content').scrollTop($('.Content')[0].scrollHeight);

＆＃13;

.OuterDiv
{
  width:200px;
  height:300px;
  border:1px solid #000;
  position:relative;
  }
.Content
{
  width:200px;
  max-height:250px;
  background-color:grey;
  overflow:auto;
  }
.text
{
  resize:none;
  position:absolute;
  bottom:0;
  left:0;
  width:194px;
  height:45px;
  max-height:145px;
  background-color:rgba(250, 120, 30,1);
  font-size:16px;
  font-family:Arial;
  overflow:auto;
  word-wrap:break-word;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
  <div class="Content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <textarea class="text" placeholder="Write some text..."></textarea>
</div>

＆＃13;

在div的底部动态滚动条

1 个答案: