Menu
I created a window using html and javascript to display display log messages generated by my website. I want to set it up so that when the user opens the log window it auto scrolls to the bottom of the log messages. I've gotten it so that the log messages display correctly, but I am having trouble getting the auto scroll to work.
My html/javascript looks like this:
<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>
The call to dajaxice is just basically grabbing the last n lines of a log file that I have and then sending them to the js function I defined as saveLogs().
I've tried using some of the solutions given in similar questions but haven't had any luck getting them to work.
EDIT I tried setting it up like this:
<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>
This worked except every time the page refreshes with new messages it goes back to the bottom; this makes it hard to view older messages at the top. Is there a way to have it start at the bottom of the div but not force the user back down if they are looking at messages near the top?
694
// To scroll to the bottom of a div const theElement = document. getElementById('elementID'); const scrollToBottom = (node) => { node. scrollTop = node. scrollHeight; } scrollToBottom(theElement); // The specified node scrolls to the bottom.
jQuery scroll to the bottom of div set the scrollTop property of a div's JavaScript to the value of scroll height property to scroll to the bottom. ScrollTop and height() methods in jQuery can be used to scroll a page from top to bottom automatically.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
Scenario 1: To scroll down the web page by pixel. Javascript method ScrollBy() scrolls the web page to the specific number of pixels. The syntax of ScrollBy() methods is : executeScript("window. scrollBy(x-pixels,y-pixels)");
Here Try:
document.getElementById('logtext').scrollIntoView();
EDIT
document.getElementById('bottomspan').scrollIntoView();
<font face="courier">
<span id="show" class='value'> content....
<span id='bottomspan'></span>
</span>
</font>
EDIT
var el = document.getElementById('logtext')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height - window.innerHeight);
Edit to answer Edit
<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);
});
Try using
var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );
Your script works fine: http://jsfiddle.net/b1tf63yd/1/
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
