動態滾動條位於div底部

Question

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

 .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; } 

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

早上好，

您是否知道在文本區域中寫入文本時如何使滾動條仍在底部（添加文本時文本區域會增加）。 刷新頁面后，滾動條在底部，但添加文本時不在

Answer 1

我在此SO帖子中找到了答案。 每次鍵入時，您都想再次滾動到底部，以確保您位於.Content的底部。

對於某些故意在內容中向上滾動的用戶來說，這可能很煩人，因此您應該為此添加額外的檢查。

 $('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); 

 .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; } 

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