轮子之vue-sticky

作者: fanlelee | 来源:发表于2020-04-16 12:36 被阅读0次

    sticky,顾名思义,就是在页面内容滚动时,它将作为一部分内容一起滚动,当滚动到一定位置,悬浮于文档流不再滚动,而滚动回来,又会作为文档流的一部分一起滚动。
    需求很好满足,难点在于发现bug。

    在用vue造轮子sticky时,写完基本功能,发现bug到最终解决方案记录如下:

    1. bug1:
      this.$refs.sticky.getBoundingClientRect().top,到显示屏上边框的距离会随着滚动而变化,window.scrollY也会随着滚动而变化,不难发现top+window.scrollY的值是不变的(top值也能为负)。
      解决:在mounted就获取一次top+window.scrollY的值,成为固定值,来与window.scrollY作比较,从而判断出sticky什么事后悬浮。
    2. bug2:
      当要sticky时,其元素为浮动元素(position:fixed),没有占位,例下图,本来浏览器是能显示9行,在没有滚动前:浏览器能显示8+1行(包括还没有sticky之前这一行的元素)。那么滚动浏览器页面:第一行就会变成sticky浮动起来,但是浏览器已经滚动到显示9行,原本浏览器就是可以包含9行,那么滚动条就会消失,既然这个时候不能滚动了,那就不要sticky了,所以滚动时sticky就会进入一个变与不变的死循环里。


      image.png

      解决:给sticky多加一层div设置高度进行占位,设置这个div的高度为sticky的this.$refs.sticky.getBoundingClientRect().height

    3. bug3:
      以上解决方案会引发另外一个bug,当我们网速很慢时,sticky的内容又含有图片,那么图片还没加载出来就已经获取了sitcky的高度,那么获取的一定是错误的高度。
      解决:在监听window滚动时再去设置占位div的高度,判断出要sticky之前设置占位div的高度。
    let scrollY = window.scrollY
    let {height, top} = this.$refs.sticky.getBoundingClientRect()
    if (scrollY <  top + scrollY) {
      this.sticky = false
    } else {
      this.$refs.stickyWrapper.style.height = height + 'px'
      this.sticky = true
    }
    
    1. bug4:
      sticky的父组件如果设置了宽度,并且让其在页面居中,那么滚动时,sticky浮动起来后left如果不设置的话,会超出去
      解决:用js来动态获this.$refs.sticky.getBoundingClientRect()来设置sticky的css:left和width
      贴上代码:
      https://github.com/fanlelee/gulu/blob/master/src/sticky.vue

    相关文章

      网友评论

        本文标题:轮子之vue-sticky

        本文链接:https://www.haomeiwen.com/subject/ewhrvhtx.html