이 기사에서는 모바일 단말기의 팝업 상자에서 (코드 포함) 배경 슬라이딩을 비활성화하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.
한 페이지 내에서는 다음 방법이 가능합니다
body;html 오버플로 설정: Hidden
.overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $('html, body,.page').addClass('overflow-hidden'); // 隐藏时 $('html, body,.page').removeClass('overflow-hidden');
Problem
본문 내용이 한 페이지를 초과하면 팝업 배경 페이지가 자동으로 위로 스크롤되어 원본으로 돌아갈 수 없습니다. 팝업 상자 위치
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" });
Problem
본문 내용이 한 페이지를 초과하면 팝업 배경 페이지가 자동으로 위로 스크롤되어 이전으로 돌아갈 수 없습니다. 팝업의 원래 위치
페이지 상단 및 페이지 스크롤이 발생했습니다. 페이지가 깜박입니다
touchmove 이벤트를 바인딩한 다음 PreventDefault()를 호출하세요
function preventDefaultFn(event){ event.preventDefault(); } // 弹出时 遮罩层 $('.modal-overlay').on('touchmove', preventDefaultFn); // 隐藏时 遮罩层 $('.modal-overlay').off('touchmove', preventDefaultFn);
Problem
팝업에 스크롤되는 내용이 있습니다.
해결 방법
팝업 상자에서 스크롤이 필요한 요소에 표시를 추가한 후 event.preventDefault() 실행 여부를 결정합니다.
위치 추가: 메인 요소 절대 (권장)
.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 관련 버그 수정됨
페이지 구조 변경 필요
CSS 코드가 약간 많음
위 내용은 모바일 단말기의 팝업창에서 배경슬라이딩을 비활성화하는 구현방법 소개(코드포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!