JS008. 跳转缓存滚动条高度并返回时过渡动画（window.pageYOffset & window.scrollTo & SessionStorage）

业务场景

从列表跳转详情页，通过操作返回列表页时，滚动条仍然处于跳转前的高度，并加上 ease-out 的过渡动画。

由于sessionStorage是随页面即关即消的，所以比起VUEX、localStorage、cookie更适合此应用场景

• 跳转页面标签执行事件 JSON.stringify(SessionStorage.setItem('key') 储存滚动条偏移量

• 生命周期加载页面或异步获取到数据后执行事件 JSON.parse(SessionStorage.getItem('key')) 作为函数实参

代码实现

/**
 * 缓存滚动条动画
 * @param offsetX, offsetY: scroll offset
 * @param speed: inverse ratio
 * @returns {Function}
 * @constructor
 */
export const stayRoll = (offsetX, offsetY, speed) => {
  let scrollY = 0
  if (!speed) {
    speed = 10
  } else if (typeof speed === 'number' || typeof speed === 'string') {
    speed = parseInt(speed)
  } else {
    throw '请设置正确的速度 Third arg. (支持数字String、十进制Number类型整数)'
  }

  function rolling() {
    if (scrollY < offsetY - 2) {
      scrollY += (offsetY - scrollY) / speed
      setTimeout(() => {
        window.scrollTo(offsetX, scrollY)
        rolling()
      }, 18)
    } else {
      scrollY = 0
      window.scrollTo(offsetX, offsetY)
    }
  }
  setTimeout(() => {
    rolling()
  }, 100)
}

形参	offsetX (Number)	offsetY (Number)	speed (Number / String_number)
描述	横向滚动偏移量	竖向滚动偏移量	过渡动画速度（反比） 可接收Number类型整数（十进制）、字符串类型整数
实例	0	300	12

进阶

应用场景不再仅限于从上至下，在单页面应用中可以将跳转后页面的滚动条记录下来，在跳转后页面滚动高度大于跳转前高度时，从下至上执行滚动过渡。

在真正单页面的应用场景时，只需要监听当前滚动条的偏移高度即可，不再用session存储。

/**
 * 缓存滚动条动画
 * @param offsetX, offsetY: scroll offset
 * @param speed: inverse ratio
 * @returns {Function}
 * @constructor
 */
export const stayRoll = (offsetX, offsetY, speed) => {
  let scrollY
  if (!speed) {
    speed = 10
  } else if (typeof speed === 'number' || typeof speed === 'string') {
    speed = parseInt(speed)
  } else {
    throw '请设置正确的速度 Third arg. (支持数字String、十进制Number类型整数)'
  }
  scrollY = offsetY[1]

  if (offsetY[0] < offsetY[1]) {
    offsetY[0] += 2
    function rolling() {
      if (scrollY > offsetY[0] + 2) {
        scrollY -= (scrollY - offsetY[0]) / speed
        setTimeout(() => {
          window.scrollTo(offsetX, scrollY)
          rolling()
        }, 18)
      } else {
        scrollY = 0
        window.scrollTo(offsetX, offsetY[0])
      }
    }

    setTimeout(() => {
      rolling()
    }, 100)
  } else {
    offsetY[0] -= 2
    function rolling() {
      if (scrollY < offsetY[0] - 2) {
        scrollY += (offsetY[0] - scrollY) / speed
        setTimeout(() => {
          window.scrollTo(offsetX, scrollY)
          rolling()
        }, 18)
      } else {
        scrollY = 0
        window.scrollTo(offsetX, offsetY[0])
      }
    }

    setTimeout(() => {
      rolling()
    }, 100)
  }
}

形参	offsetX (Number)	offsetY (Array[Number, pageYOffset])	speed (Number / String_number)
描述	横向滚动偏移量	竖向滚动偏移量数组	过渡动画速度（反比） 可接收Number类型整数（十进制）、字符串类型整数
实例	0	[1000, window.pageYOffset]	12

代码存在冗余，请酌情优化。

- END -