This website requires JavaScript.

safari坑之 滑动回弹

今天在使用safari浏览博客的时候,

发现在拉至顶部并产生回弹时,头部导航会隐藏,

除非在上拉的时候,刚好达到顶部而不超出顶部产生回弹才会正常显示

这是博客原来隐藏显示头部导航的逻辑

fix: {
  inserted(el) {
    let beforeScrollTop = document.documentElement.scrollTop ||
        window.pageYOffset ||
        window.scrollY ||
        document.body.scrollTop
    window.addEventListener('scroll', _.throttle(() => {
      const afterScrollTop = document.documentElement.scrollTop ||
            window.pageYOffset ||
            window.scrollY ||
            document.body.scrollTop
      const delta = afterScrollTop - beforeScrollTop
      if (delta === 0) return false
      delta > 0
        ? el.classList.add('fixed')
      : el.classList.remove('fixed')
      setTimeout(() => {
        beforeScrollTop = afterScrollTop
      }, 0)
    }, 200))
  },
    unbind() {
      window.onscroll = null
    }
}

可以看到主要逻辑是根据scrolltop前后变化值来改变导航栏样式,

把前后的scrolltop都打印出来,观察下过程值

console.log("after"+afterScrollTop)
console.log("before"+beforeScrollTop)

chrome中正常情况下,回弹不会改变scrolltop的值

而在safari中, 把页面拉至顶部回弹时,scrolltop是会变为负值的ˊ_>ˋ

image-20200306190912004

知道问题在哪,解决就很简单了,给两位朋友套个abs就好

0条评论
avatar