sticky,顾名思义,就是在页面内容滚动时,它将作为一部分内容一起滚动,当滚动到一定位置,悬浮于文档流不再滚动,而滚动回来,又会作为文档流的一部分一起滚动。
需求很好满足,难点在于发现bug。
在用vue造轮子sticky时,写完基本功能,发现bug到最终解决方案记录如下:
- bug1:
this.$refs.sticky.getBoundingClientRect().top
,到显示屏上边框的距离会随着滚动而变化,window.scrollY
也会随着滚动而变化,不难发现top+window.scrollY
的值是不变的(top值也能为负)。
解决:在mounted就获取一次top+window.scrollY
的值,成为固定值,来与window.scrollY作比较,从而判断出sticky什么事后悬浮。 -
bug2:
当要sticky时,其元素为浮动元素(position:fixed),没有占位,例下图,本来浏览器是能显示9行,在没有滚动前:浏览器能显示8+1行(包括还没有sticky之前这一行的元素)。那么滚动浏览器页面:第一行就会变成sticky浮动起来,但是浏览器已经滚动到显示9行,原本浏览器就是可以包含9行,那么滚动条就会消失,既然这个时候不能滚动了,那就不要sticky了,所以滚动时sticky就会进入一个变与不变的死循环里。
image.png
解决:给sticky多加一层div设置高度进行占位,设置这个div的高度为sticky的this.$refs.sticky.getBoundingClientRect().height
- 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
}
- bug4:
sticky的父组件如果设置了宽度,并且让其在页面居中,那么滚动时,sticky浮动起来后left如果不设置的话,会超出去
解决:用js来动态获this.$refs.sticky.getBoundingClientRect()
来设置sticky的css:left和width
贴上代码:
https://github.com/fanlelee/gulu/blob/master/src/sticky.vue
网友评论