速度.js：滚动元素的 x 轴

Question

我想在 x-axis上滚动 #carousel 500px。但是我不明白为什么velocity function什么都不做...错误在哪里？

html：

   <div class="carousel" id="carousel">
     <div class="carousel__scroller" id="carousel__scroller">
       <ul>
         ...
         <li class="carousel__item">...</li> 
         ...
       </ul>
     </div>
   </div>

SCSS：

.carousel {
    position: relative;
    top: 20px;
    height: 150px;
    z-index: 2;
    outline: 1px solid black;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  &__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;
      }
    }
  }
}

JS：

...
    $('#carousel').velocity("scroll", {
       axis: "x",
       offset: "500px",
       duration: 250,
       easing: "ease-in-out"
    });
...

update

jQuery替代方案效果很好：

$('#carousel').animate({
    scrollLeft: '500'
}, 250);

，但我仍然想使用Velocity.js。仍然没有运气...

Answer 1

问题是..我忘了提供container。

这是一个工作示例：

    $carouselScroller
        .velocity('scroll', {
            container: $carousel,
            offset: slide * screen.width,
            duration: 200,
            axis: 'x',
            easing: 'linear',
            complete() {
                //some onComplete fn
            }
        });

Answer 2

速度 2.0 期望单元（px或％）：

$('#carousel').velocity({
    scrollLeft: '500px'
}, 250);

https://github.com/julianshapiro/velocity/wiki/property--scrollleft