一、scrollLeft这里使用的是zepto的API来做一些介绍和演示,

这里有一个常见的样式,左侧是可以滚动的,右侧为固定宽度,现有一需求,点击某个类目后居左该类目,其实实现方法比较简单,思路如下。1、获取当前父级的滚动left。2、获取当前点击类目的left。3、滚动父级的scrollLeft至点击类目的leftAPI则比较简单

当然获取类目的left也可以通过原生的getBoundingClientRect()方法和offsetLeft属性去获取 实现方式还是比较多的。不过值得说说的是,通过offset()和getBoundingClientRect获取到的都是元素距离视窗的距离,如果要获取基于父级的得用zepto的position()方法。因为上述的父级是贴边的所以这里使用offset()和position()差别不算太多当滚动条是在最左边也就是初始状态的时候,来获取“食品生鲜”的left

当滚动条到了母婴玩具之后,获取的left就不同了

tips:通过position()获取的left是除去了父级的padding和left通过offset()会大于position()获取到的 因为这里的父级有padding

那么得出最后的移动距离就是 scrollLeft(scrollLeft+类目的left) 其中scrollLeft方法这里一定是为正数的不过需求往往没那么简单,目前是实现了 每次点击都类目都在父级的最左边居左展示,如果需要居中展示呢?简单归纳为 父级的宽度/2 - 类目距离父级的left - 类目的宽度/2

不过这样left算出来的有时是负数 所以在实际移动的时候需要abs一下

做到这里算是完成了90% 但是还有一种情况就是 选定的类目的left小于父级的宽度/2 这种情况你居中也是比较难居中的。所以最终实现就是

这里的15为offset() - 父级的padding 要不然会一直贴边影响美观。