彈框內容滾動頁面不滾動辦法


之前寫過一篇文章,是解決彈框顯示的時候, body 不允許滑動,思路大致如下:

彈框顯示時,設置 html 和 body  overflow:hidden ,並阻止瀏覽器的默認行為;

彈框隱藏時,設置 html 和 body  overflow:auto ,並方法瀏覽器默認行為。

但是這種辦法當彈框里面的內容也需要滑動的時候,是滑動不了的,因為已經阻止了瀏覽器的默認滑動行為。

后來針對這種需求的解決辦法為:

1.頁面滑動時,獲取外層盒子的 scrollTop ,彈框顯示時設置滾動盒子 position:fixed , top 為外層盒子當前 scrollTop 

2.取消彈框時恢復滾動盒子 position:relative;top:0; ,外層盒子賦值 scrollTop 為原來的 scrollTop 

這樣既阻止了主體內容的滾動,同時又不影響彈框內容的滾動。

 

如有表述不准確之處,歡迎指正,歡迎補充,感謝閱讀。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM