|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于移動端下彈框禁止背景滑動的實現方法介紹(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。茴字寫法有很多種,找到最適合的才是好的。 以下下方法在一屛之內是可行的 body;html 設置overflow:hidden .overflow-hidden{
height: 100%;
overflow: hidden;
}
// 彈出時
$('html, body,.page').addClass('overflow-hidden');
// 隱藏時
$('html, body,.page').removeClass('overflow-hidden');問題 當body內容超出一屛時,彈框背景頁面會自動滾動到頂部,無法回到原來彈框所在的位置 保存scrollTop,再設置scrollTo var top = $(window).scrollTop();
// 彈出時
$("body .page").css({
"position": "fixed",
"top": -top,
"left": 0,
"right": 0,
"bottom": 0
}),
// 隱藏式
$("body .page").css({
"position": "static"
});
$("html").css({
"scroll-behavior": "unset"
});
$(window).scrollTop(top),
$("html").css({
"scroll-behavior": "smooth"
});問題 當body內容超出一屛時,彈框背景頁面會自動滾動到頂部,無法回到原來彈框所在的位置 頁面發生了 top 和頁面滾動;頁面會有閃爍的情況 綁定touchmove事件,然后調用preventDefault() function preventDefaultFn(event){
event.preventDefault();
}
// 彈出時 遮罩層
$('.modal-overlay').on('touchmove', preventDefaultFn);
// 隱藏時 遮罩層
$('.modal-overlay').off('touchmove', preventDefaultFn);問題 彈框中還有滾動的內容,滾動內容也無法滾動 解決 給彈框內需滾動的元素添加標記,在判斷是否執行event.preventDefault(); 給main元素添加position:absolute(推薦) .page {
/* main絕對定位,進行內部滾動 */
position: absolute;
top: 0;
bottom: 0;
right:0;
left:0;
/* 使之可以滾動 */
overflow-y: scroll;
/* 增加該屬性,可以增加彈性 */
-webkit-overflow-scrolling: touch;
}
.overflow-hidden{
overflow: hidden;
}
// 彈出時
$('.page').addClass('overflow-hidden');
// 隱藏時
$('.page').removeClass('overflow-hidden');
<div class="page">
<!-- 內容在這里... -->
</div>優點沒有上述這些問題 隨帶解決了ios fixed 的相關bug 缺點需要改頁面結構 css代碼微多 以上就是移動端下彈框禁止背景滑動的實現方法介紹(附代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!