之前寫過一篇文章,是解決彈框顯示的時候, body 不允許滑動,思路大致如下:
彈框顯示時,設置 html 和 body overflow:hidden ,並阻止瀏覽器的默認行為;
彈框隱藏時,設置 html 和 body overflow:auto ,並方法瀏覽器默認行為。
但是這種辦法當彈框里面的內容也需要滑動的時候,是滑動不了的,因為已經阻止了瀏覽器的默認滑動行為。
后來針對這種需求的解決辦法為:
1.頁面滑動時,獲取外層盒子的 scrollTop ,彈框顯示時設置滾動盒子 position:fixed , top 為外層盒子當前 scrollTop
2.取消彈框時恢復滾動盒子 position:relative;top:0; ,外層盒子賦值 scrollTop 為原來的 scrollTop
這樣既阻止了主體內容的滾動,同時又不影響彈框內容的滾動。
如有表述不准確之處,歡迎指正,歡迎補充,感謝閱讀。