I created a page that scrolled via JavaScript but in some browsers it does not scroll very smoothly when you and text to the page? And it doesn't seem to work at all in chrome.
My question is:
What is the best method to create smooth scrolling html pages using JavaScript that works cross browser.
To get an idea of what I was trying to do, here is the test page I made.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>test</title>
<style type="text/css">
html
{
overflow:hidden;
}
#fixedtop
{
padding:1%;
position:fixed;
float:left;
vertical-align:middle;
}
table.scollTable td
{
background-color:Gray;
height:12px;
width:12px;
}
table.scollTable td:hover
{
background-color:Lime;
height:20px;
width:20px;
}
.container
{
background:url(http://sstatic.net/so/img/logo.png) repeat;
height:5000px;
width:5000px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="TestPage.aspx" id="form1">
<div>
</script>
<div id="fixedtop">
<table class="scollTable" border="0" cellpadding="0" cellspacing="0">
<tr>
<td onmouseover="scroll(-20,-20,this)"></td>
<td onmouseover="scroll(-10,-20,this)"></td>
<td onmouseover="scroll(0,-20,this)"></td>
<td onmouseover="scroll(10,-20,this)"></td>
<td onmouseover="scroll(20,-20,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,-10,this)"></td>
<td onmouseover="scroll(-10,-10,this)"></td>
<td onmouseover="scroll(0,-10,this)"></td>
<td onmouseover="scroll(10,-10,this)"></td>
<td onmouseover="scroll(20,-10,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,0,this)"></td>
<td onmouseover="scroll(-10,0,this)"></td>
<td></td>
<td onmouseover="scroll(10,0,this)"></td>
<td onmouseover="scroll(20,0,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-10,10,this)"></td>
<td onmouseover="scroll(-10,10,this)"></td>
<td onmouseover="scroll(0,10,this)"></td>
<td onmouseover="scroll(10,10,this)"></td>
<td onmouseover="scroll(10,10,this)"></td>
</tr>
<tr>
<td onmouseover="scroll(-20,20,this)"></td>
<td onmouseover="scroll(-10,20,this)"></td>
<td onmouseover="scroll(0,20,this)"></td>
<td onmouseover="scroll(10,20,this)"></td>
<td onmouseover="scroll(20,20,this)"></td>
</tr>
</table>
</div>
<div class="container"></div>
</form>
</body>
</html>
<script id="sTest" type="text/javascript" onload="test()">
function scroll(x,y, elem) {
var iScroll = setInterval(
function() {
SetScroll((x + GetXScroll()), (y + GetYScroll()))
}, 1);
elem.onmouseout = function() { clearInterval(iScroll) };
}
function GetYScroll() {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
}
function GetXScroll() {
return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
}
function SetScroll(x,y) {
if (document.body.scrollTop) {
document.body.scrollLeft = x;
document.body.scrollTop = y;
}
if(document.documentElement){
document.documentElement.scrollLeft = x;
document.documentElement.scrollTop = y;
}
if (window.pageYOffset) {
try {
window.pageXOffset = x;
window.pageYOffset = y;
} catch (e) { }
}
}
</script>