Velocity.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"
    });
...

更新

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

Velocity.js: 滚动元素的 x 轴

Velocity.js: scroll element's x-axis

html

javascript

velocity