Запобігайте «перекручуванню» веб-сторінки

У Chrome для Mac можна "перекрутити" сторінку (за відсутністю кращого слова), як показано на скріншоті нижче, щоб побачити "що позаду", як у iPad чи iPhone.

Я помітив, що на деяких сторінках його відключено, як-от gmail та сторінка "нова вкладка".

Як можна відключити "overscrolling"? Чи є інші способи контролювати «перекручування»?

Прийняте рішення не працювало для мене. Єдиний спосіб, коли я працював під час прокрутки, це:

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>елемент в якості обгортки може бути корисним: рішення
Флоріана Фельдхауза використовує трохи менше коду і працює також чудово. Однак, якщо це стосується вмісту, що перевищує ширину вікна перегляду, він може мати трохи химерності. У цьому випадку смуга прокрутки в нижній частині вікна переміщується з вікна перегляду наполовину і важко розпізнати / досягти. Цього можна уникнути, 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;
}