Scrolling an HTML page with javascript?
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.scr开发者_如何学JAVAollTop = 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>
Try using window.scrollBy to do your scrolling.
And I second Evan's idea to use a library – without one you will just loose a lot of time. jQuery is just one option, the best choice depends on what are you doing.
One more thing: I noticed you tried to use XHTML. Beware that Internet Explorer is not able to display XHTML when it is done correctly (including HTTP header and so on). I recommend to stay with HTML 4.01 strict until other standards are widely supported. You won't be able to use XHTML's advantages cross-browser anyway.
Look under the hood of this demo. It might give you some ideas: xAnimation.scroll
I would recommend checking out this plugin: http://demos.flesler.com/jquery/scrollTo/ which is written for jQuery. That page will let you know what it's capable of but check out http://flesler.blogspot.com/2007/10/jqueryscrollto.html for the documentation.
The reason I suggest jQuery as well is that there's just not a better library for making complex Javascript tasks easy and manageable. For this task, you literally just need to do something like this:
$('#element').mouseover(function() {
$(this).scrollTo(20);
});
Consider using jQuery. Check out this question for more info.
加载中,请稍侯......
精彩评论