모바일 단말기의 팝업창에서 배경슬라이딩을 비활성화하는 구현방법 소개(코드포함)

不言
풀어 주다: 2018-10-27 14:45:12
앞으로
2800명이 탐색했습니다.

이 기사에서는 모바일 단말기의 팝업 상자에서 (코드 포함) 배경 슬라이딩을 비활성화하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

회향이라는 단어를 쓰는 방법에는 여러 가지가 있으며 가장 적합한 방법을 찾는 것이 가장 좋습니다.

한 페이지 내에서는 다음 방법이 가능합니다

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿