팝업 창 아래에서 하단 페이지 슬라이딩 비활성화

이번에는 팝업창 아래로 하단 페이지가 미끄러지는 것을 금지하는 주의 사항을 알려드리겠습니다. 바라보다.

프로젝트 개발 과정에서 특히 모바일 단말기에서는 팝업 창이 나타나는 페이지를 자주 접하게 됩니다. 특별한 요구 사항이 없으면 팝업 창이 팝업된 후에도 팝업 창 아래의 하단 페이지가 계속 미끄러질 수 있습니다. 보다 나은 사용자 경험을 위해서는 팝업창이 실행될 때 팝업창 하단의 페이지가 미끄러지는 것을 방지해야 합니다. 팝업창의 슬라이딩이 재개됩니다. 구체적인 아이디어는 다음과 같습니다.

1. 팝업창이 실행되면 스크롤을 하세요. 바의 위치.

2. 하단 페이지의 position 속성을 고정으로 설정하세요.

3. 팝업창이 실행될 때 하단 페이지의 위치를 ​​초기 위치로 설정합니다.

4. 팝업창을 닫을 때 하단 페이지의 위치 속성을 복원하세요.

5. 하단 페이지의 스크롤 막대 높이를 복원합니다.

//触发弹窗底部页面禁止滑动
function fixed(){
  var scrollTop = document.body.scrollTop;//设置背景元素的位置
  $('#content').attr('data-top',scrollTop);
  var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
  contentStyle.position = 'fixed'; //contentStyle是第二步的变量，设置背景元素的position属性为‘fixed'
  contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
  var contentStyle = document.getElementById("content").style;
  var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
  contentStyle.top = '0px';//恢复背景元素的初始位置
  contentStyle.position ="static";//恢复背景元素的position属性（初始值为absolute，就恢复为absolute，以此类推）
  $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

팝업 창이 트리거될 때 고정() 메서드를 실행하고, 팝업 창이 닫힐 때 고정_취소() 메서드를 실행하면 더 나은 사용자 경험을 얻을 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jackson이 json 문자열을 구문 분석할 때 자동으로 대문자와 소문자를 변환하는 방법

jQuery+localStorage를 사용하여 타이머를 구현하는 방법

위 내용은 팝업 창 아래에서 하단 페이지 슬라이딩 비활성화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!