当前位置:网站首页>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">&nbsp</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();">

原网站

版权声明
本文为[tingkeaiii]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202270542514868.html