Example of the default bottom and rightmost div scroll bars-JS Tutorial-php.cn

Example of the default bottom and rightmost div scroll bars

小云云

Release： 2017-12-21 09:38:33

Original

2477 people have browsed it

There is a requirement that when displaying the chat box, the size of the fixed box should be 300px in height and 50px in width. Then when the chat content exceeds the width or height, a scroll bar will appear, and the vertical scroll bar should default to the bottom, so that To display the latest news, the horizontal scroll bar is generally leftmost by default. This article will share with you a sample code to implement the default bottommost and default rightmost p scroll bar. The code is very concise and has good reference value. I hope it will be useful to everyone. Helps.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>实现p滚动条默认最底部以及默认最右边</title> 
  <script type="text/javascript" src="jquery文件地址"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $(&#39;#scroll_p&#39;).scrollTop( $(&#39;#scroll_p&#39;)[0].scrollHeight);
  $(&#39;#scroll_p&#39;).scrollLeft( $(&#39;#scroll_p&#39;)[0].scrollWidth);
 });
</script>
<body>


<p id="scroll_p" style="overflow-y:scroll; overflow-x:scroll;width:50px; height:300px; border:1px solid #F00;">
  pCSS5测试内容，欢迎来到pCSS5学习p+CSS技术。大家可以通过pCSS5主站上的所有免费CSS教程足可学会p CSS技术 -如果需要深入系统学习、较短时间达到理想学习效果可参加p+CSS培训班学习。
</p>
</body> 
</html>

Copy after login

Have you learned it after studying this article? Hurry up and give it a try.

Related recommendations:

Implementation of the scroll bar inside div to scroll to the bottom and top function

Setting the properties and style of the DIV scroll bar Introduction to the method

Detailed explanation of examples of js judging browsers and hack scroll bars

The above is the detailed content of Example of the default bottom and rightmost div scroll bars. For more information, please follow other related articles on the PHP Chinese website!