当前位置:网站首页>Three methods to make the scroll bar of div automatically scroll to the bottom
Three methods to make the scroll bar of div automatically scroll to the bottom
2022-06-13 08:24:00 【tingkeaiii】
Method 1 :
Use the anchor to mark the position to scroll to , And then through click Method to simulate clicking and scrolling to the anchor position
<script language="javascript1.2" type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.click();
}
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div><a id="msg_end" name="1" href="#1"> </a></div>
</div>
Method 2 :
utilize DIV Of scrollIntoView Method , Scroll the bottom end to the visible position [list=1]<script
language="javascript1.2"
type="text/javascript">
function onGetMessage(context)
{
msg.innerHTML+=context;
msg_end.scrollIntoView();
}
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>
Method 3 :
<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice"> Please click on “ Insert a row ” Button , Insert the latest information , When the scroll bar appears , The scroll bar will automatically remain at the bottom .</span><br />
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value=" Insert a row " onclick="add();">
边栏推荐
- Start from scratch - implement the jpetstore website -1- establish the project framework and project introduction
- Process and scheduled task management
- Which is the stronger fresh food distribution and sorting management system?
- JS - simple ATM of the for cycle case
- MySQL installation and configuration under Windows
- MySQL parsing serialized fields
- BD新标签页(BdTab)插件如何登入?
- 微服务系统架构搭建一:环境搭建
- 【Pycharm踩坑记录】配置远程运行后提示,[Errno 2] No such file or directory
- The method of SolidWorks modifying text font in engineering drawing
猜你喜欢
第115页的gtk+编程例子——最简单的进度条2附带使用Anjuta写gtk程序的步骤
[notes] like the solution to the problem of slow query (index + explicitly specifying query fields)
HCIP_ OSPF irregular area
Buuctf web (VII)
About redis encapsulation tool class using distributed locks
How app inventor accesses resource files in assets directory
使用kvm创建三台能通局域网的虚拟机
Buffer Overflow Vulnerability Lab
ERP basic data Kingdee
Import the robot model built by SolidWorks into ROS
随机推荐
HCIP_ MGRE experiment
淘宝商品销量接口/淘宝商品销量监控接口/商品累计销量接口
Mysql_ Preliminary summary of database data (Continued)
[notes] like the solution to the problem of slow query (index + explicitly specifying query fields)
Cosmos star application case
Did decentralized digital identity
MySQL sorts according to the specified order of the specified fields
Dest0g3 520迎新賽
LVM management exercise
How to use annotations in word
ERP 基础数据 概念
字符串的逆序与比较
Call to undefined function think\captcha\imagettftext()
JS - max. of array cases
JS to download files in batches
Young's matrix to find whether a number exists
Using KVM to create three virtual machines that can communicate with local area network
DHCP principle and configuration
CCNP_ BT static routing
微服务系统架构搭建一:环境搭建