使用Javascript滾動到div的底部
[英]Scroll to bottom of div using Javascript
問題描述
我使用html和javascript創建了一個窗口來顯示我的網站生成的顯示日志消息。 我想設置它，以便當用戶打開日志窗口時，它會自動滾動到日志消息的底部。 我已經得到它以便日志消息正確顯示，但我無法使自動滾動工作。
我的html / javascript看起來像這樣：
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="text-center">Log Messages</h4>
</div>
<div class="panel-body">
<div class="content" id="logtext">
<font face="courier">
<span id="show" class='value'></span>
</font>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
//I tried doing this and nothing happened.
var objDiv = document.getElementById("logtext");
objDiv.scrollTop = objDiv.scrollHeight;
}, 1000);
});
</script>
</div>
</body>
對dajaxice的調用基本上是抓取我擁有的日志文件的最后n行，然后將它們發送到我定義為saveLogs()的js函數。
我嘗試過使用類似問題中給出的一些解決方案，但沒有任何運氣讓他們工作。
編輯我嘗試這樣設置：
<div class="panel-body">
<div class="content" id="logtext">
<script language="javascript" type="text/javascript">
document.getElementById('bottomspan').scrollIntoView();
</script>
<font face="courier">
<span id="show" class='value'>
</span>
<div id='bottomspan'></div>
</font>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
// document.getElementById('bottomspan').scrollIntoView();
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
var el = document.getElementById('bottomspan')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height);
},700);
});
</script>
這工作除了每次頁面刷新新消息時它都會返回到底部; 這使得很難在頂部查看較舊的消息。 有沒有辦法讓它從div的底部開始，但如果他們正在查看頂部附近的消息，請不要強迫用戶退縮？
3 個解決方案
解決方案1
3 2015-08-26 16:37:51
在這里嘗試：
document.getElementById('logtext').scrollIntoView();
編輯
document.getElementById('bottomspan').scrollIntoView();
<font face="courier">
<span id="show" class='value'> content....
<span id='bottomspan'></span>
</span>
</font>
編輯
var el = document.getElementById('logtext')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height - window.innerHeight);
編輯以回答編輯
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText =
},700);
var el = document.getElementById('bottomspan')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height);
});
解決方案2
1 2015-08-26 16:41:15
嘗試使用
var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );
你的腳本運行正常： http ： //jsfiddle.net/b1tf63yd/1/
解決方案3
0 2016-02-29 15:52:30
只需關注元素即可使元素可見。
<span id="feed_item" />
document.getElementById("feed_item").focus();
如果當前滾動位置在底部附近，則javascript滾動到div的底部
[英]javascript scroll to bottom of div if current scroll location is near bottom
在以下情況下，使用Javascript或jquery滾動到頁面底部
[英]Scroll to bottom of page using Javascript or jquery with these conditions
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.