Web sayfasının "aşırı kaydırılmasını" önleyin

Mac için Chrome'da, iPad veya iPhone'a benzer şekilde, "arkasında ne olduğunu" görmek için aşağıdaki ekran görüntüsünde gösterildiği gibi (daha iyi bir kelimenin olmaması nedeniyle) bir sayfada "fazla kaydırma" yapılabilir.

Gmail ve "yeni sekme" sayfası gibi bazı sayfaların devre dışı bırakıldığını fark ettim.

"Aşırı kaydırmayı" nasıl devre dışı bırakabilirim? "Aşırı kaydırmayı" kontrol edebileceğim başka yollar var mı?

Kabul edilen çözüm benim için çalışmıyordu. Hala kaydırma yapabiliyorken onu çalıştırmamın tek yolu:

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

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

Chrome 63+, Firefox 59+ ve Opera 50+ sürümlerinde bunu CSS'de yapabilirsiniz:

body {
  overscroll-behavior-y: none;
}

Bu, sorunun ekran görüntüsünde gösterilen iOS üzerindeki lastik bant etkisini devre dışı bırakır. Bununla birlikte, yenilemek için çekme, parlama efektleri ve kaydırma zincirini devre dışı bırakır.

Bununla birlikte, fazla kaydırma üzerine kendi efektinizi veya işlevselliğinizi uygulamayı seçebilirsiniz. Örneğin, sayfayı bulanıklaştırmak ve düzgün bir animasyon eklemek istiyorsanız:

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

Tarayıcı Desteği

Bu yazı itibariyle Chrome 63+, Firefox 59+ ve Opera 50+ desteklemektedir. Safari bir bilinmeyenken Edge bunu genel olarak destekledi. İlerlemenizi takip Burada en ve mevcut tarayıcı uyumluluğu MDN belgelerinde

Daha fazla bilgi

• Chrome 63 sürüm videosu
• Chrome 63 sürüm yayını - yukarıda yazdığım her şeyin bağlantılarını ve ayrıntılarını içerir.
• overscroll-behavior CSS spesifikasyonu
• MDN belgeleri

Bunu önlemenin bir yolu aşağıdaki CSS'yi kullanmaktır:

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

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

Bu şekilde, gövde hiçbir zaman taşmaz ve sayfanın üstünde ve altında gezinirken "zıplamaz". Kap, içeriğini mükemmel bir şekilde kaydıracaktır. Bu, Safari'de ve Chrome'da çalışır.

Düzenle

<div>Bir sarmalayıcı olarak ekstra eleman neden yararlı olabilir:
Florian Feldhaus'un çözümü biraz daha az kod kullanıyor ve iyi çalışıyor. Bununla birlikte, görüntü alanı genişliğini aşan içerik söz konusu olduğunda biraz tuhaf gelebilir. Bu durumda, pencerenin altındaki kaydırma çubuğu, görüntü alanının yarısına kadar dışarı çıkar ve tanınması / ulaşılması zordur. Bu, body { margin: 0; }uygunsa kullanılması önlenebilir . Bu CSS'yi ekleyemediğiniz durumlarda, kaydırma çubuğu her zaman tamamen görünür olduğundan sarmalayıcı öğesi kullanışlıdır.

Aşağıda bir ekran görüntüsü bulun:

touchmoveÖnceden tanımlanmış eylemi kaldırmak için bu kodu kullanabilirsiniz :

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

Bu yolu dene

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

position: absolutebenim için çalışıyor. Chrome 50.0.2661.75 (64-bit)OSX üzerinde test ettim .

body {
  overflow: hidden;
}

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

Sıçrama efekti, web sayfasının yüksekliğinin eşit olması dışında devre dışı bırakılamaz window.innerHeight, alt öğelerinizin kaymasına izin verebilirsiniz.

html {
    overflow: hidden;
}