views:

926

answers:

4

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>
A: 

Consider using jQuery. Check out this question for more info.

Evan Meagher
one of my first ideas was to use $().animate(); but it was jittery and did not work in chrome. I made the code posted as generic as possible because I was kind of expecting examples and didn't want to narrow the scope of this post to jQuery. It seem that everyone's answer to js question is "Just use jQuery" before they read the question. I am not saying don't use jQuery just try not to be so general.
x13
A: 

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.

Augustus
But how many webservers autodetect XHTML and consequently declare a different MIME type, if that's what you're talking about?Moreover, XHTML's advantages aren't just in the browser - they're also in some code editors.
Stewart
I don't know how many servers try to detect XHTML. They would also need to detect browsers as their behavior differs otherwise you might end up with a “do you want to download this file” message instead of a page display in the worst case. Thus I recommended to stick with HTML for browsers for now.Without a doubt XHTML has its advantages, for example during development as you mention, and there's nothing wrong about using it therefore. But you should still send a HTML version to browsers as it's more likely to work. I hope this changes so that XHTML can be send to clients without worrying.
Augustus
A: 

Look under the hood of this demo. It might give you some ideas: xAnimation.scroll

Mike Foster
A: 

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);
});
jcmoney