Ngăn chặn "quá tải" của trang web

Trong Chrome dành cho Mac, người ta có thể "cuộn qua" một trang (thiếu từ hay hơn), như được hiển thị trong ảnh chụp màn hình bên dưới, để xem "những gì đằng sau", tương tự như iPad hoặc iPhone.

Tôi nhận thấy rằng một số trang đã tắt tính năng này, như gmail và trang "tab mới".

Làm cách nào tôi có thể tắt "thanh toán quá mức"? Có những cách nào khác để tôi có thể kiểm soát việc "cuộn quá mức" không?

Giải pháp được chấp nhận không hoạt động đối với tôi. Cách duy nhất tôi làm cho nó hoạt động trong khi vẫn có thể cuộn là:

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

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

Trong Chrome 63+, Firefox 59+ và Opera 50+, bạn có thể thực hiện việc này trong CSS:

body {
  overscroll-behavior-y: none;
}

Điều này vô hiệu hóa hiệu ứng đai cao su trên iOS được hiển thị trong ảnh chụp màn hình của câu hỏi. Tuy nhiên, nó cũng vô hiệu hóa các hiệu ứng kéo để làm mới, phát sáng và chuỗi cuộn.

Tuy nhiên, bạn có thể chọn triển khai hiệu ứng hoặc chức năng của riêng mình khi cuộn quá mức. Ví dụ: nếu bạn muốn làm mờ trang và thêm hoạt ảnh gọn gàng:

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

Hỗ trợ trình duyệt

Kể từ khi viết bản này, Chrome 63+, Firefox 59+ và Opera 50+ hỗ trợ nó. Edge công khai hỗ trợ nó trong khi Safari là một ẩn số. Theo dõi tiến trình tại đây và khả năng tương thích của trình duyệt hiện tại tại tài liệu MDN

Thêm thông tin

• Video phát hành Chrome 63
• Bài đăng phát hành Chrome 63 - chứa các liên kết và thông tin chi tiết về mọi thứ tôi đã viết ở trên.
• overscroll-behavior Thông số CSS
• Tài liệu MDN

Một cách bạn có thể ngăn chặn điều này là sử dụng CSS sau:

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

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

Bằng cách này, phần nội dung không bao giờ bị tràn và không bị "trả lại" khi cuộn ở đầu và cuối trang. Vùng chứa sẽ cuộn nội dung của nó một cách hoàn hảo. Điều này hoạt động trong Safari và trong Chrome.

Biên tập

Tại sao phần bổ sung <div>như một trình bao bọc có thể hữu ích:
Giải pháp của Florian Feldhaus sử dụng ít mã hơn một chút và hoạt động tốt. Tuy nhiên, nó có thể có một chút khó hiểu, khi nói đến nội dung vượt quá chiều rộng khung nhìn. Trong trường hợp này, thanh cuộn ở cuối cửa sổ bị di chuyển ra khỏi khung nhìn một nửa và khó nhận ra / tiếp cận. Điều này có thể được tránh sử dụng body { margin: 0; }nếu phù hợp. Trong trường hợp bạn không thể thêm CSS này, phần tử trình bao bọc rất hữu ích vì thanh cuộn luôn hiển thị đầy đủ.

Tìm ảnh chụp màn hình bên dưới:

Bạn có thể sử dụng mã này để xóa touchmovehành động được xác định trước:

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

Hãy thử cách này

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

position: absolutelàm việc cho tôi. Tôi đã thử nghiệm trên 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;
}

Không thể tắt hiệu ứng thoát ngoại trừ chiều cao của trang web bằng window.innerHeight, bạn có thể cho phép các thành phần phụ của mình cuộn.

html {
    overflow: hidden;
}