问题 - 滚动到指定位置遇上上方区域有图片且高度不固定

375 阅读1分钟

需求

通过在url上加参数或点击页面上的icon可以滑动到指定的位置

原方案

vue项目,在初始数据加载完后判断url上是否有定位参数,有则在this.$nextTick内调用如下函数。

toPosition() {
    this.$nextTick(() => {
        document.querySelector('.line').scrollIntoView({block: 'start', behavior: 'smooth'});
    });
},

点击icon也是调用如上函数

问题

指定位置以上有图片,未加载完时有占位图,是默认高度。当图片加载完后,高度自适应(高度不固定)。所以,当先定位,再图片加载完时,图片自适应高度如果大于默认高度,则指定位置会被图片挤下去。

解决方案

图片默认是默认高度,只有满足以下条件,才换成自适应高度的样式。(以下条件是 且 的关系)

  1. 图片加载完成
  2. 没有执行过toPosition 或者 执行过toPosition且用户已滑动过页面
this.imgOneLoaded && (!this.toPositioned || this.touchMove);

注意

  1. 在PC上不行,PC上没法区分是用户滚动页面还是程序滚动了页面(即没法得到准确的this.touchMove)
  2. 滑动时图片刚好加载完还是会有闪一下的效果

求教

各位有更好的方案,不妨留个言~