this.fm[0].scrollTo 在手机浏览器上报错

[hcysunyang]

this.fm[0].scrollTo 在手机浏览器上报错

[zaxlct]

Chrome 59 模拟调试：

[zaxlct]

如果有必要我可以把那个网页展示给你看下

[HcySunYang]

@zaxlct
scrollTo(target, ms) 方法在进行滚动的时候，如果 target 属性是元素或者元素选择器的话，底层使用如下代码进行位置计算：

export function getRelativeRect (parent, child) {
    let pos = {
        top: 0,
        left: 0
    }
    while (child !== parent) {
        pos.top += child.offsetTop
        pos.left += child.offsetLeft
        child = child.offsetParent
    }
    return pos
}

其中 getRelativeRect 方法的接受两个参数，el 就是可滚动元素，就是你再初始化 finger-mover 实例时传入的el选项，child 是 el 的子节点，在这里例子中就是你那里的“美妆”按钮，通过上面代码可以看出，是循环增加 child.offsetLeft/Top 来计算的。你出现的问题或许与布局有关，你可以尝试给可滚动元素添加相对定位试试。
我这边也会排查一下这个问题。
另外一个应急的解决办法是：你手动计算一下距离，然后把距离传递给 scrollTo 方法。

[zaxlct]

@HcySunYang 这是简化版的代码，供参考，然后我尝试直接传距离给 scrollTo 方法。

<div class="navbar_container">
    <div id="scroll_box" :style="{width: shop_type_list.length * 64 + 'px'}">
      <div @click="调用fm[0].scrollTo" v-for="(type, key) in shop_type_list">
        {{type}}
      </div>
    </div>
</div>

const shop_type_list = [
    '今日推荐','女装','男装','鞋子','箱包',
    '美妆','护肤','生活','居家', '美食', '内衣',
    '运动','数码','母婴','配饰', '成人', '宠物',
 ]

 this.fm = new Fmover({
     el: '#scroll_box',
     plugins: [
        simulationScrollX({
          scrollBar: false,
       }),
     ]
 })

.navbar_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#scroll_box { 
  height: 40px;
}

.nav_item {
  display: inline-block;
  width: 64px;
}

[HcySunYang]

@zaxlct 你给 #scroll_box 元素添加相对定位，应该就可以解决问题

#scroll_box {
    position: relative;
}

另外，源码也已经修改。随着下一个版本发布，这个时候就不需要手动给 DOM 元素加定位了。

[zaxlct]

@HcySunYang OK，目前场景直接传距离给 scrollTo 方法也挺方便的