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

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

---

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

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

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

---

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

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

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

---

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

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

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

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

편집하다

Why the extra <div>-element as a wrapper could be useful:
Florian Feldhaus' solution uses slightly less code and works fine too. However, it can have a little quirk, when it comes to content that exceeds the viewport width. In this case the scrollbar at the bottom of the window is moved out of the viewport half way and is hard to recognize/reach. This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.

Find a screenshot below:

---

In Chrome 63+, Firefox 59+ and Opera 50+ you can do this in CSS:

body {
  overscroll-behavior-y: none;
}

This disables the rubberbanding effect on iOS shown in the screenshot of the question. It however also disables pull-to-refresh, glow effects and scroll chaining.

You can however elect to implement your own effect or functionality upon over-scrolling. If you for instance want to blur the page and add a neat animation:

<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>

Browser Support

As of this writing Chrome 63+, Firefox 59+ and Opera 50+ support it. Edge publically supported it while Safari is an unknown. Track progress here and current browser compatibility at MDN documentation

More information

• Chrome 63 release video
• Chrome 63 release post - contains links and details to everything I wrote above.
• overscroll-behavior CSS spec
• MDN documentation

---

Try this way

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

---

You can use this code to remove touchmove predefined action:

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;
}

---

position: absolute works for me. I've tested on Chrome 50.0.2661.75 (64-bit) and 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;
}

참고 URL : https://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page