
如圖,需要實現類似閱讀完整個協議之后,我接受這個按鈕才能被點擊。
第一反應想到的是監聽滾動,scroll
美滋滋的綁定事件,然后判斷 : 滾動的距離大於內部的高度減去外部的高度的時候就視為到達底部
scrollTop + divHeight >= scrollHeight
這里scrollTop指的是滾動的距離,可以理解為滾動條距離頂部的距離,
divHeight是父元素的高度,想要在父元素里滾動,當然子元素高度要大於父元素。
scrollHeight就是子元素的高度了
嗯,一切都很順利,當到達底部的時候按鈕被激活,隱藏這個協議框,然后繼續下一步操作。
當我再次進這個頁面的時候發現,協議還是在底部。導致這個問題有幾個原因:
1.因為這個頁面的協議是需要實時獲取的,也就是每進一次這個頁面我都需要去查詢一下協議然后展示在協議框。
2.用戶關閉協議框有兩種可能,一是閱讀完之后也就是滾動條下滑到底部之后,這時點擊我已閱讀是關閉協議框。二是用戶之后點擊叉叉。
現在問題發生的情況是在用戶閱讀完之后,再次進入這個頁面時協議沒有回到頂部。導致scrolltop一直是0,無法響應事件。
我以為是再次拉取協議數據的時候沒有清空子元素的內容,然而並不是這個影響的,dom節點是重新渲染的。我一直以為只要節點重新渲染,
滾動距離就會自動重置即回到頂部。
解決方案:在我關閉協議框的時候,使用$(_pageId + ".allnewsin-side").scrollTop(0);手動讓它滾動到頂部。然后。。。。就解決了。。。
本人不明白的地方:
滾動條的高度是父元素的屬性嗎?滾動條的長度是由內部子元素決定的,照理來說我改變子元素的內容,滾動條應該重置。然而並沒有,是不是可以理解為其實
是作用在父元素上的
