jQuery의 팝업 창에서 하단 페이지 비활성화 슬라이딩 효과를 얻는 방법

프로젝트 개발 과정에서 특히 모바일 단말기에서는 팝업 창이 나타나는 페이지를 자주 접하게 됩니다. 이번 글을 통해 jQuery가 팝업 창 아래 하단 페이지의 슬라이딩을 비활성화하는 효과를 구현하는 방법을 공유하겠습니다. 필요한 친구들은 참고할 수 있습니다

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

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

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

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,设置滚动条的位置
}

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글 :

Webpack+Babel+React 환경 구축 상세 설명(상세 튜토리얼)

webpack+vue2를 이용한 프로젝트 구축

webpack babel 관련 설정 상세 해석(상세 튜토리얼)

webpack의 vue 프로젝트 리소스 파일과 관련된 404 문제 보고(자세한 튜토리얼)

vue.js에 vux를 통합하여 풀업 로딩 및 풀다운 새로 고침을 구현하는 방법

Gulp를 사용하여 정적 구현하는 방법 웹페이지 모듈화는 구체적으로 어떻게 하나요?

js를 사용하여 WeChat을 구현하여 Alipay가 빨간 봉투를 받도록 유도(자세한 튜토리얼)

기록을 사용하여 반응 라우터에서 라우팅을 제어하는 ​​방법(자세한 튜토리얼)

vue-ssr을 사용하여 다음 작업을 수행하는 방법 서버 측 렌더링 구현

Vue2.0 상위 구성 요소와 하위 구성 요소 간의 디스패치 메커니즘 구현에 대해(자세한 튜토리얼)

jQuery + SpringMVC_jquery의 확인란 선택 및 값 전달 예제

값을 얻는 방법 SpringMVC의 게시물에 있는 다중 선택 상자 값(코드 예)

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