vue 이동단 탄기몽층 미끄럼 금지 밑부분 미끄럼 조작

해결 방법
몽둥이가 튀어나올 때 바디를fixed 포지셔닝으로 설정합니다.
몽둥이가 사라졌을 때 바디를 제자리로 돌려줍니다.

popupVisible(newValue) {
  if (newValue) {
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.height = '100%';
  }
  else {
    document.body.style.position = 'static';
    document.body.style.height = 'auto';
  }
},

fixed로 설정할 때 전체 페이지가 제자리로 돌아갑니다. 위치부터 scrollY를 적어야 할 경우 복구할 때 제자리로 굴러갑니다.

popupVisible(newValue) {
  if (newValue) {
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.height = '100%';
    this.top = window.scrollY;
  }
  else {
    document.body.style.position = 'static';
    document.body.style.height = 'auto';
    window.scrollTo(0, this.top);
  }
}

보충 지식: vue를 사용할 때 페이지 안에 탄창이 있을 때 페이지 스크롤을 금지하고 페이지 안의 탄창이 절대적인 위치로 인해 페이지가 압축되는 문제를 해결합니다
다음과 같습니다.
@touchmove.prevent
페이지 탄창이 나타날 때 @touchmove를 설정합니다.prevent = "false";
2. 페이지 내 탄창이 절대적인 위치로 인해 페이지가 압축되는 문제로 인해 아래쪽 네비게이션 표시줄이 입력 키보드에 고정되는 문제

//  
//  Virtual DOM ， ．
  this.bodyHeight = `${document.documentElement.clientHeight}`;
//  window resize ． ．
 window.onresize = function temp() {
 var bodyHeight = `${document.documentElement.clientHeight}`;
 that.bodyHeight = bodyHeight;
 };

body Height 수치의 변화를 판단하여 밑부분 네비게이션 표시줄의 출현과 숨김을 제어합니다
상기 vue 이동단 탄기 몽층 미끄럼 금지 밑부분 미끄럼 조작은 바로 편집자가 여러분께 공유한 모든 내용입니다. 참고 부탁드리고 저희를 많이 사랑해 주세요.