Zapobiegaj „nadmiernemu przewijaniu” strony internetowej

W Chrome na Maca można „przewinąć” stronę (z braku lepszego słowa), jak pokazano na poniższym zrzucie ekranu, aby zobaczyć „co się kryje”, podobnie jak na iPadzie lub iPhonie.

Zauważyłem, że niektóre strony mają tę funkcję wyłączoną, np. Gmail i strona „Nowa karta”.

Jak mogę wyłączyć „nadmierne przewijanie”? Czy są inne sposoby kontrolowania „nadmiernego przewijania”?

Przyjęte rozwiązanie nie działało dla mnie. Jedyny sposób, w jaki sprawiłem, że działa, a jednocześnie mogę przewijać, to:

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

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

W Chrome 63+, Firefox 59+ i Opera 50+ możesz to zrobić w CSS:

body {
  overscroll-behavior-y: none;
}

Spowoduje to wyłączenie efektu gumowania na iOS pokazanego na zrzucie ekranu pytania. Jednak wyłącza również przeciągnij, aby odświeżyć, efekty blasku i łańcuch przewijania.

Możesz jednak zdecydować się na zaimplementowanie własnego efektu lub funkcji po przewinięciu zbyt dużym. Jeśli na przykład chcesz rozmyć stronę i dodać ładną animację:

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

Wsparcie przeglądarki

Od tego momentu Chrome 63+, Firefox 59+ i Opera 50+ obsługują go. Edge publicznie ją wspierał, podczas gdy Safari jest nieznane. Śledź postępy tutaj i aktualną zgodność przeglądarek w dokumentacji MDN

Więcej informacji

• Film o wersji Chrome 63
• Post o wydaniu Chrome 63 - zawiera linki i szczegóły do ​​wszystkiego, co napisałem powyżej.
• overscroll-behavior Specyfikacja CSS
• Dokumentacja MDN

Jednym ze sposobów, aby temu zapobiec, jest użycie następującego kodu CSS:

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

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

W ten sposób treść nigdy nie jest przepełniona i nie „podskakuje” podczas przewijania na górze i na dole strony. Pojemnik doskonale przewinie swoją zawartość. Działa to w Safari i Chrome.

Edytować

Dlaczego dodatkowy <div>element jako opakowanie może być przydatny:
rozwiązanie Floriana Feldhausa używa nieco mniej kodu i również działa dobrze. Może to jednak mieć trochę dziwactwa, jeśli chodzi o zawartość, która przekracza szerokość widocznego obszaru. W tym przypadku pasek przewijania na dole okna jest odsunięty od rzutni do połowy i jest trudny do rozpoznania / sięgnięcia. Można tego uniknąć używającbody { margin: 0; } jeśli jest to odpowiednie. W sytuacji, gdy nie możesz dodać tego CSS, element wrapper jest przydatny, ponieważ pasek przewijania jest zawsze w pełni widoczny.

Znajdź zrzut ekranu poniżej:

Możesz użyć tego kodu, aby usunąć touchmovepredefiniowaną akcję:

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

Spróbuj w ten sposób

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

position: absolutepracuje dla mnie. Testowałem na Chrome 50.0.2661.75 (64-bit)i OSX.

body {
  overflow: hidden;
}

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

Efekt odbijania nie może zostać wyłączony, z wyjątkiem tego, że wysokość strony jest równa window.innerHeight, możesz pozwolić na przewijanie elementów podrzędnych.

html {
    overflow: hidden;
}