웹 페이지의 "오버 스크롤"방지

Mac 용 Chrome에서는 아래 스크린 샷에 표시된 것처럼 페이지를 "오버 스크롤"하여 (더 나은 단어가없는 경우) iPad 또는 iPhone과 유사한 "뒤에있는 항목"을 볼 수 있습니다.

Gmail 및 "새 탭"페이지와 같은 일부 페이지에서 비활성화 된 것으로 나타났습니다.

"오버 스크롤"을 비활성화하려면 어떻게합니까? "오버 스크롤"을 제어 할 수있는 다른 방법이 있습니까?

허용 된 솔루션이 저에게 효과가 없었습니다. 스크롤 할 수있는 동안 작동하는 유일한 방법은 다음과 같습니다.

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

Chrome 63+, Firefox 59+ 및 Opera 50+에서는 CSS로 다음을 수행 할 수 있습니다.

body {
  overscroll-behavior-y: none;
}

이렇게하면 질문의 스크린 샷에 표시된 iOS에서 러버 밴딩 효과가 비활성화됩니다. 그러나 당겨서 새로 고침, 글로우 효과 및 스크롤 체인도 비활성화됩니다.

그러나 오버 스크롤시 고유 한 효과 또는 기능을 구현하도록 선택할 수 있습니다. 예를 들어 페이지를 흐리게하고 깔끔한 애니메이션을 추가하려는 경우 :

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

브라우저 지원

이 글을 쓰는 시점에서 Chrome 63+, Firefox 59+ 및 Opera 50+가 지원합니다. Edge는 공개적으로 지원했지만 Safari는 알려지지 않았습니다. 여기에서 진행 상황을 추적 하고 MDN 문서 에서 현재 브라우저 호환성을 확인 하세요.

추가 정보

• Chrome 63 출시 동영상
• Chrome 63 출시 게시물 -위에서 작성한 모든 내용에 대한 링크와 세부 정보가 포함되어 있습니다.
• overscroll-behavior CSS 사양
• MDN 문서

이를 방지 할 수있는 한 가지 방법은 다음 CSS를 사용하는 것입니다.

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

이렇게하면 본문이 오버플로되지 않으며 페이지의 상단과 하단에서 스크롤 할 때 "바운스"되지 않습니다. 컨테이너는 내용을 완벽하게 스크롤합니다. 이것은 Safari와 Chrome에서 작동합니다.

편집하다

<div>래퍼로 추가 요소가 유용 할 수있는 이유 :
Florian Feldhaus의 솔루션 은 코드를 약간 적게 사용하고 잘 작동합니다. 그러나 뷰포트 너비를 초과하는 콘텐츠의 경우 약간의 기이함이있을 수 있습니다. 이 경우 창 하단의 스크롤바가 뷰포트에서 절반 정도 떨어져서 인식 / 접근하기 어렵습니다. body { margin: 0; }적절한 경우 사용을 피할 수 있습니다 . 이 CSS를 추가 할 수없는 상황에서는 스크롤바가 항상 완전히 표시되므로 래퍼 요소가 유용합니다.

아래에서 스크린 샷을 찾으십시오.

이 코드를 사용하여 touchmove미리 정의 된 작업 을 제거 할 수 있습니다 .

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);

html,body {
    width: 100%;
    height: 100%;
}
body {
    position: fixed;
    overflow: hidden;
}

이 방법으로 시도

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

position: absolute나를 위해 작동합니다. 나는 Chrome 50.0.2661.75 (64-bit)OSX에서 테스트했습니다 .

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

바운스 효과는 웹 페이지 높이가와 같을 때를 제외하고는 비활성화 할 수 없으며 window.innerHeight하위 요소를 스크롤 할 수 있습니다.

html {
    overflow: hidden;
}