Last updated on May 24th, 2016 at 04:15 pm
Scroll text using Javascript
Scroll text inside div vertically using Javascript. There is also option to pause the scroll (onMouseOver) and resume it (onMouseOut). Once scroll is complete it will automatically go up and restart scroll. It is a kind of infinite div text scroll.
You can control the scroll speed using scrollRate variable. Lower the number slower the scroll will be.
Javascript code
<script language="javascript">
ScrollRate = 110;
function scrollDiv_init() {
DivElmnt = document.getElementById('ScrollingDiv');
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
console.log("Test1")
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop=PreviousScrollTop-10;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval('scrollDiv()', ScrollRate);
}
</script>
HTML code is as below
<body onLoad="scrollDiv_init()"> <div id="ScrollingDiv" style="overflow:hidden;width:700px;height:30px;background-color:black;color:white;text-align:left;font-size:20px" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()"> SOME TEXT YOU NEED TO SCROLL GOES HERE </div>
NOTE: LED text scroll which was previously posted (Aug 21, 2010) here is no longer working. Hence we have changed it and updated with a new vertical scroll using Javascript (May 24, 2016).
Keep up the fantastic piece of work, I read few posts on this internet site and I think that your web blog is really interesting and contains lots of superb information