ป้องกัน "การเลื่อนเกิน" ของหน้าเว็บ

ใน Chrome สำหรับ Mac คุณสามารถ "เลื่อนทับ" หน้าหนึ่ง ๆ ได้ (หากไม่มีคำที่ดีกว่า) ดังที่แสดงในภาพหน้าจอด้านล่างเพื่อดูว่า "มีอะไรอยู่ข้างหลัง" ซึ่งคล้ายกับ iPad หรือ iPhone

ฉันสังเกตเห็นว่าบางเพจปิดใช้งานเช่น gmail และหน้า "แท็บใหม่"

ฉันจะปิด "การเลื่อนเกิน" ได้อย่างไร มีวิธีอื่นอีกไหมที่ฉันสามารถควบคุม "การเลื่อนเกิน" ได้

วิธีแก้ปัญหาที่ยอมรับไม่ได้ผลสำหรับฉัน วิธีเดียวที่ฉันทำให้มันใช้งานได้ในขณะที่ยังสามารถเลื่อนได้คือ:

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>เป็นกระดาษห่อหุ้มจึงมีประโยชน์:
โซลูชันของ Florian Feldhausใช้รหัสน้อยกว่าเล็กน้อยและทำงานได้ดีเช่นกัน อย่างไรก็ตามอาจมีมุมแหลมเล็กน้อยเมื่อพูดถึงเนื้อหาที่เกินความกว้างของวิวพอร์ต ในกรณีนี้แถบเลื่อนที่ด้านล่างของหน้าต่างจะถูกย้ายออกจากวิวพอร์ตไปครึ่งทางและยากที่จะรับรู้ / เข้าถึง สิ่งนี้สามารถหลีกเลี่ยงได้โดยใช้body { margin: 0; }หากเหมาะสม ในสถานการณ์ที่คุณไม่สามารถเพิ่ม CSS นี้องค์ประกอบ Wrapper จะมีประโยชน์เนื่องจากแถบเลื่อนสามารถมองเห็นได้อย่างเต็มที่เสมอ

ค้นหาภาพหน้าจอด้านล่าง:

ลองดูวิธีนี้

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

คุณสามารถใช้รหัสนี้เพื่อลบ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;
}

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