I created a page that scrolls using JavaScript, but in some browsers it doesn't scroll very smoothly when you and the text on the page? And that doesn't seem to work at all in chrome.
My question is:
What is the best way to create smooth scrollable html pages using JavaScript that works with cross browser.
To understand what I'm trying to do, here is a test page that I did.
<!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>