Home > Article > Web Front-end > Example of the default bottom and rightmost div scroll bars

Example of the default bottom and rightmost div scroll bars

小云云Original: 2017-12-21 09:38:332460browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of js to determine whether the content area is scrolled to the bottomNext article：Detailed explanation of js to determine whether the content area is scrolled to the bottom

See more

Example of the default bottom and rightmost div scroll bars

Related articles