Scroll text using Javascript

Byadmin

Aug 21, 2010

Last updated on May 24th, 2016 at 04:15 pm

VN:F [1.9.22_1171]
Rating: 6.1/10 (16 votes cast)

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>

DEMO

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).

VN:F [1.9.22_1171]
Rating: 6.1/10 (16 votes cast)
One thought on “Scroll text using Javascript”
  1. 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

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *

16 + six =