title: Velocity.js: scroll element's x-axis
body: <p>I want to scroll <code>#carousel</code> <code>500px</code> on <code>x-axis</code>. But I can't understand why <code>velocity</code> <code>function</code> does not do anything... Where is a mistake?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>   &lt;div class="carousel" id="carousel"&gt;
       &lt;div class="carousel__scroller" id="carousel__scroller"&gt;
         &lt;ul&gt;
           ...
           &lt;li class="carousel__item"&gt;...&lt;/li&gt; 
           ...
         &lt;/ul&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>.carousel {
      position: relative;
      top: 20px;
      height: 150px;
      z-index: 2;
      outline: 1px solid black;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
  
    &amp;__scroller {
      position: absolute;
      background: lightgreen;
      width: 375000px;
      height: 100%;
  
      ul {
        height: 100%;
  
        li {
          height: 100%;
          line-height: 40px;
          background: lightgreen;
          position: absolute;
          outline: 1px solid white;
          padding-left: 10px;
          width: 100vw;
          float: left;
        }
      }
    }
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>...
      $('#carousel').velocity("scroll", {
         axis: "x",
         offset: "500px",
         duration: 250,
         easing: "ease-in-out"
      });
  ...
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>jQuery alternative works well:</p>
  
  <pre><code>$('#carousel').animate({
      scrollLeft: '500'
  }, 250);
  </code></pre>
  
  <p>But I still want to use <code>Velocity.js</code>. Still no luck with it...</p>