A more efficient/cleaner way of scrolling a div's contents in HTML My current code for scrolling an image contained within a div is:



&lt;html&gt;

&lt;head&gt;
  &lt;style type="text/css"&gt;
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 128px;
      overflow: hidden;
    }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n &lt; (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="oScroll"&gt;
    &lt;img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' /&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;




This was designed some time ago, and I was thinking that there must be a better way of writing it now.

Since my project requires performance over looks, I want to have a high performing page, but still with little animations like this.

Is there a more efficient way of creating something like this?
Here are a couple of recommendations on the JS side if you choose not to use the CSS-only solution:


Use private vars with the var statement instead of instance vars
with the this statement unless you need to actually expose this
properties for public inspection or use by another object.
Don't make vScroll into a global - it is only used in the scope of setup so it can be defined inside of setup, and if it isn't global, you can pass vScroll.move by reference to setInterval instead of using setInterval's quote syntax, which requires an extra parsing step.
Use a cross-browser compatible document.ready like jQuery's, or in the very least use DOMContentLoaded. The onload event can wait for the entire document to load, including CSS, but DOMContentLoaded occurs when the DOM is available (will increase load speed).




&lt;html&gt;

&lt;head&gt;
  &lt;style type="text/css"&gt;
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 128px;
      overflow: hidden;
    }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
function scroll(oid, iid) {
  // 1. These should all be private vars instead of instance vars
  var oCont = document.getElementById(oid),
      ele = document.getElementById(iid),
      width = ele.clientWidth,
      n = oCont.clientWidth;

  // Public API, used by another object (app)
  this.move = function() {
    // Missing semi-colons
    ele.style.left = n + "px";
    n--;
    if (n &lt; -width) {
      n = oCont.clientWidth;
    }
  }
}

// 2. No need for vScroll in this scope unles you need it outside of the setup function
// var vScroll

function setup() {
  var vScroll = new scroll("oScroll", "scroll");
  // 3. Pass a reference to setInterval instead of global var in quotes
  setInterval(vScroll.move, 20)
}

// 4. Use DOMContentLoaded as document.ready instead of window.onload
document.addEventListener('DOMContentLoaded', function(){
  setup()
});
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="oScroll"&gt;
    &lt;img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' /&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;