场景
在工作台toolbox中开发本地插件,在右侧内容区域父容器上存在v-scroll指令,在本地插件内部实现锚点功能,点击锚点跳转后,无法上滑。
排查原因
v-scroll是基于第三方包isscroll封装的指令,通过调试isscroll源码发现,锚点跳转触发pointerup事件直接走了第三方包isscroll里面的_end方法,没有走_move的过程,this.y 纵向偏移量(newY)没有附上值,如果强制在外边进行赋值的情况下,会导致下一步的滑动触发更新方法updatePosition重置。
// 主要代码
// _move过程中进行计算newY, 在_translate赋值
_move: function () {
var point = e.touches ? e.touches[0] : e,
deltaX = point.pageX - this.pointX,
deltaY = point.pageY - this.pointY,
newX, newY,
this.pointX = point.pageX;
this.pointY = point.pageY;
...
this.distX += deltaX;
this.distY += deltaY;
newX = this.x + deltaX;
newY = this.y + deltaY;
this._translate(newX, newY);
}
// 更新滚动条
_translate: function () {
...
this.x = x;
this.y = y;
if ( this.indicators ) {
for ( var i = this.indicators.length; i--; ) {
this.indicators[i].updatePosition();
}
}
}
// 滚动结束,主要进行事件的卸载
_end: function () {
...
utils.removeEvent(window, 'touchmove', this);
utils.removeEvent(window, utils.prefixPointerEvent('pointermove'), this);
utils.removeEvent(window, 'mousemove', this);
this.scroller._execEvent('scrollEnd');
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SqSZtPvF-1625644471066)(/uploads/7713e43a18876d5cd2106595b556de7b/image.png)]
解决方法
由于isscroll与锚点兼容性问题,如果组件中有用到锚点的话
<a href="#"></a>
// 或者
element.scrollTo()
// 或者
element.scrollIntoView()
需要把v-scroll去掉,在当前元素上设置overflow:auto即可实现锚点的正常跳转。