Menu
Community /Pin to ProfileBookmark
Javascript Auto scroll problem
Hello, i have one autoscroll script that will smooth scroll up and down and has mouse over pause, that will be script number one. Now i have a second script that step scrolls, what im trying to do is add the step scrolling method to script number one, so it will have step scrolling, mouse over pause, and up and down the page motion, but im having a bit of trouble trying to figure this one out, any help would be much appreciate.
<!DOCTYPE html>
<html>
<head>
<title>CALL PHP FROM JS</title>
<script src=”https://www.funplaytyme.com/rssfeedtest/jquery.min.js”></script>
<script language=”javascript”>
ScrollRate = 50;
function scrollDiv_init() {
DivElmnt = document.getElementById(‘MyDivName’);
ReachedMaxScroll = false;
DivElmnt.scrollTop = 0;
PreviousScrollTop = 0;
ScrollInterval = setInterval(‘scrollDiv()’, ScrollRate);
}
function scrollDiv() {
if (!ReachedMaxScroll) {
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop++;
ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight – DivElmnt.offsetHeight);
}
else {
ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
DivElmnt.scrollTop = PreviousScrollTop;
PreviousScrollTop–;
}
}
function pauseDiv() {
clearInterval(ScrollInterval);
}
function resumeDiv() {
PreviousScrollTop = DivElmnt.scrollTop;
ScrollInterval = setInterval(‘scrollDiv()’, ScrollRate);
}
</script>
<style>
/* Style the element with the id “myHeader” */
#MyDivName {
background-color: lightblue;
color: white;
}
</style>
</head>
<body onLoad=”scrollDiv_init()”>
<div id=”MyDivName” style=”overflow:hidden;width:176px;height:200px” onMouseOver=”pauseDiv()”onMouseOut=”resumeDiv()”>
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
</div>
</body>
</html>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script type = “text/javascript”>
$(function () {
var interval = setInterval(function () {
if ($(“#div1”).scrollTop() != $(‘#div1’)[0].scrollHeight) {
$(“#div1”).scrollTop($(“#div1”).scrollTop() + 10);
} else {
clearInterval(interval);
}
}, 1000);
});
</script>
<div id = “div1” style = “height:100px;width:200px;border:1px solid #ccc;overflow:auto”>
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
This is a DIV<br />
</div>
Sign in
to post a comment