手机页面滚动穿透问题【原创】_html/css_WEB-ITnose
最近在写的微信页面有遇到一个问题:就是点击页面一个按钮出来弹框和透明蒙版后,理论上底部的父页面是不可以被操作的。但是现在对当前弹框和透明蒙版组成的页面滑动时,底部的父页面还是会跟着滚动,这也就是所谓的手机页面穿透问题。
百度了很多方法后,还是没能完美的解决这个问题。不过这里也将把这些方法总结列举一下,期待后面有更好的解决办法。
方法一:
.alpha { height: 100%; overflow: hidden; position: relative;}.alpha body { height: 100%; overflow: hidden;}
当你切换弹框出现或隐藏的时候只要切换该css,即:
$('html').toggleClass('alpha');
当然在实际使用的时候你可能需要拆开使用这句代码,如当你点击按钮让弹框出来的时候需要使用该css,即用:
$('html').toggleClass('alpha');
当你点击确定或取消让弹框消失的时候,你需要去掉该css使父页面恢复正常滚动状态,即:
$('html').removeClass('alpha');
该方法的缺点就是当你的页面内容一屏显示不完时,需要滚动屏幕显示全部内容时,你的弹框会出现在页面内容的顶部,因为上面的css已经将页面高度定义成了屏幕高度,所以页面下面的部分也就相当于暂时截取掉了,当你隐藏弹框的时候,你也是在页面顶部,不会默认回到你之前点击按钮(按钮在页面底部)的地方,在页面很长的时候用户体验不是很好。方法二:
.noscroll { position: fixed!important}
var page = document.getElementsByTagName('body')[0];//禁止页面滚动page.classList.add('noscroll');//恢复页面滚动page.classList.remove('noscroll');
也有上面的缺点方法三:
//If you want to use the iframe's scrollbar and not the parent's use thisdocument.body.style.overflow = 'hidden';//If you want to use the parent's scrollbar and not the iframe's then you need to use:document.getElementById('your_iframes_id').scrolling = 'no';or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">
该方法不会出现上面的问题,但是可惜的是在手机页面没用,只在pc浏览器有用。
本文永久地址:http://blog.it985.com/15205.html
本文出自IT985博客 ,转载时请注明出处及相应链接。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。
