JS "Seamless" rolling principle (to solve the difference between IE and "Firefox") __js

A few days ago, because to do a picture of seamless scrolling, so the Internet to check the information. found that although there are many related tutorials on the web, but there are not many can be detailed and thorough, usually give a large section of code to make people see dizziness. But there is no way, can not be deterred by a bit of code. Oh

The gossip is less to say. The first thing to introduce is the offsetwidth, scrollleft in DHTML (I do the left scrolling, so take these two for example, the other direction is the same)

Offsetwidth Simple is the width of the object, such as in JS, document.getElementById ("obj"). Offsetwidth gets 120.

ScrollLeft is the position of the object's scroll relative to the left.

Rolling principle: The main use of JS control contains scrolling objects "external objects" (I do not know how to express) the scrollleft to achieve. In addition, with CSS Overflow:hidden to achieve the effect of the trap scroll bar. More specifically: in CSS, when the contents of an object outside the object's own width or height, you can use overflow to control whether scrolling or automatic adaptation (note: This is the key.) If scrolling is not allowed, then what is "seamless" is empty talk. So when we're going to scroll some objects (like a few pictures), we can add an object that is smaller than their total width or height on the outside of those objects, so that we can use overflow to scroll through.

Here's a schematic of what I'm drawing (click to view larger image):

There are a lot of examples on the Web (here's a copy of me from the web to change the test) interested in can view its source program.

  Its main principle is: first copy an inner object, and then the two objects scroll together, when the object 1 scrolling, scroll back to the original position, and began scrolling within object 1. This looks like the object in constant scrolling (that is, the so-called seamless scrolling, in fact, careful attention will be found when the object 1 and start rolling, the middle will have a small beat).
          key code is as follows:
       Within        object 2.innerhtml= object 1.innerhtml;   //Copy inner object
              if (Inner object 2.offsetwidth-outside object. scrollleft<=0)
                   External objects. scrollleft-= Object 1.offsetwidth;//Scroll Inside object 1
   But this is usually written in the "Firefox" can be constantly rolling, in IE are rolling for a while not moving, why. Because in IE the scrollleft includes the width of the scroll bar, but "Firefox" is not included. So the inner object 2.offsetwidth-outside the object. Scrollleft<=0 in IE, this condition is usually not satisfied, because in IE, scroll to the left of the right scroll bar scrollleft will "stop", do not believe you can see an example (http:// knowmore.blogbus.com/files/11769931210.html ).

How to solve this problem. The main is to set a variable to grow with ScrollLeft, when the variable and scrollleft are not equal, it is already rolling to the end, the scrollleft and variable set to the initial state, within the object 1 can also scroll. (concrete example)

Originally want to more specific analysis, helpless expression ability, plus in the company idle time to not much, so had to make up to write out. Hope it's a bit of use.