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