search

ustbhuangyi / better-scroll

:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance
https://better-scroll.github.io/docs/en-US/
MIT License
16.47k stars 2.61k forks source link

Refresh 之後內容 transform: translate 高度計算錯誤，造成拉動後無法復位，發生在 1.12.0 版本 #577

Closed ArvinHsieh closed 6 years ago

ArvinHsieh commented 6 years ago

Version

1.12.0

Reproduction link

http://jsbin.com/xukicucona/edit?js,output

Steps to reproduce

請參考 jsbin 範例

1.建立 HTML 內容，簡單的 ul li 列表，wapper 上面放置一個 Header div 2.加入bscroll.min.js 3.new BSScroll 4.察看結果，發現滾動過一次之後，列表的前幾個項目位置會被上提且無法恢復原始位置

What is expected?

正常滾動且位置可以恢復

What is actually happening?

可以滾動，但是滾動一次之後，就無法恢復原始位置，內容物會被上提，底下會多空白

觀察原始碼發現 1.12.0 在 refresh 內多了 this.relativeY = scrollerRect.top; 這個動作，導致如果版面設計上如果 Scroll 上方還有元素，在計算的時候會造成誤算。或者 wapper 父層如果有做 margin-top: 40px 也會讓 transform: translate 高的部分變成 -40，造成整個卷軸往上偏移。除非父層增加 style position: relative; 才不會計算錯誤。

異常範例: http://jsbin.com/xukicucona/edit?html,css,js,output 正常範例: http://jsbin.com/geyupebaye/1/edit?js,output

ustbhuangyi commented 6 years ago

1.12.1 版本已修复这个问题

hzzo85 commented 6 years ago

任然存在这个问题，请务必再核实，在生产环境上发现bug了！

ustbhuangyi commented 6 years ago

@hzzo85 ，报什么错了，我看 @ArvinHsieh 提供的 demo 都已经正常了。

zhaozhuoboy commented 3 years ago

我2.4.2版本也出现这个问题