Предотвращение "перекрестной" веб-страницы

Ответ 1

Принятое решение для меня не работало. Единственный способ, которым я работал, пока еще могу прокручивать, - это:

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

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

Ответ 2

Один из способов предотвратить это: используйте следующий CSS:

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

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

Таким образом, тело никогда не переполняется и не будет "отскакивать" при прокрутке вверху и внизу страницы. Контейнер отлично прокрутит содержимое. Это работает в Safari и в Chrome.

Edit

Почему дополнительный <div> -элемент в качестве обертки может быть полезен: Решение Флориана Фельдхауса использует немного меньше кода и отлично работает. Тем не менее, это может быть немного причудой, когда дело доходит до контента, который превышает ширину окна просмотра. В этом случае полоса прокрутки в нижней части окна перемещается из окна просмотра наполовину и ее трудно распознать/достичь. Этого можно избежать, используя body { margin: 0; }, если это подходит. В ситуации, когда вы не можете добавить этот CSS, элемент оболочки полезен, поскольку полоса прокрутки всегда полностью видима.

Найдите скриншот ниже:

Ответ 3

Попробуйте этот способ

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

Ответ 4

Вы можете использовать этот код для удаления предопределенного действия touchmove:

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

Ответ 5

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

Ответ 6

Эффект отскока нельзя отключить, за исключением того, что высота веб-страницы равна window.innerHeight, вы можете прокручивать свои подэлементы.

html {
    overflow: hidden;
}

Ответ 7

В Chrome версии 63+ вы можете сделать это в 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+ и Opera 50 поддерживают его. Firefox в разработке, Edge публично поддержал его, а Safari неизвестно. Отслеживание прогресса здесь.

Дополнительная информация

• Chrome 63 выпускает видео
• Сообщение о выпуске Chrome 63 - содержит ссылки и подробности ко всему, что я написал выше.
• overscroll-behavior Спецификация CSS

Ответ 8

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

Ответ 9

Также убедитесь, что ваша страница не превышает определенного разрешения.

Например:

• 1280x1024
• 1024x768
• 800x700

У меня хороший способ сделать это, что я обычно следую за 1024x768 и сделать ваш самый длинный div ~ 980px.

Создание сайта для разрешения 1024x768 полезно, потому что большинство браузеров, просматривающих Интернет, >= 1024x768 (как показано на w3 здесь).

Чтобы убедиться, что div находится ВСЕГДА в центре. Это легко:

.div{
    width:1024px;
    margin:0px auto; /* this aligns the 'div' to ALWAYS be in the center */
}