效果圖
通過效果圖我們可知我們的期望效果如下：
1、拖動開始時顯示滾動條
2、拖動結(jié)束時隱藏滾動條
3、滾動條長度和文章總高度是成比例的
4、拖動到上邊界時滾動條會成比例的縮短
5、拖動結(jié)束時滾動條會變回原來的高度
變量名說明
下文中說的main=顯示范圍層，text=內(nèi)容層，bar=滾動條。
頁面載入時
載入時要讓滾動條的高度根據(jù)比例變?yōu)橹付ǜ叨?/p>
[[main.height/text.height*main.height]]
main拖動開始時
顯示bar
main拖動結(jié)束時
隱藏bar
拖動到上下邊界結(jié)束時將bar還原到原來的高度，上下邊界的錨點(diǎn)不同。
拖動到上邊界時要以頂部為錨點(diǎn)，拖動到下邊界時要以頂部為錨點(diǎn)。
拖動時對內(nèi)容和bar進(jìn)行拖動范圍上下限設(shè)置
【重點(diǎn)：要用心理解，不理解自己畫圖理解！
向下拖拽到上邊界的情況，判定條件：[[text.y]]>0
此時，需要將bar的高度設(shè)置為[[main.height/text.height*main.height*(1-(text.y/(main.height*0.5)))]]
分解：
main.height/text.height=顯示范圍和內(nèi)容頁的比例
比例*main.height=滾動條標(biāo)準(zhǔn)高度
main.height*0.5=半屏高度
text.y=拖動超出上邊界值
1-拖動超出上邊界值/半屏高度=滾動條高度系數(shù)
滾動條標(biāo)準(zhǔn)高度*滾動條高度系數(shù)=此時滾動條的高度
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。