Thuộc tính overscroll-behavior kiểm soát hành vi khi cuộn đến biên giới element/trang.

Cú pháp

selector { overscroll-behavior: auto | contain | none; }
/* Chi tiết theo trục: */
overscroll-behavior-x: contain;
overscroll-behavior-y: none;

Giá trị

Ví dụ 1: Chặn scroll chaining trên element

<!DOCTYPE html>
<html>
<head>
  <style>
    .scroll-box {
      width: 500px; height: 200px;
      overflow-y: auto;
      overscroll-behavior-y: contain;  /* Không cuộn lên body */
      background: plum; padding: 20px;
    }
    p { font-size: 1.5em; line-height: 1.6; }
  </style>
</head>
<body>
  <h2>overscroll-behavior: contain trên element</h2>
  <div class="scroll-box">
    <p>Nội dung dài... cuộn đến đáy sẽ KHÔNG làm cuộn trang cha.</p>
    <p>Pellentesque id velit non metus lacinia viverra...</p>
    <p>Vestibulum ultricies diam sit amet laoreet sollicitudin...</p>
  </div>
  <p>Nội dung trang chính (cuộn độc lập với hộp trên)</p>
</body>
</html>

Ví dụ 2: Tắt pull-to-refresh toàn trang (mobile)

<style>
  body { overscroll-behavior: none; }  /* Hoặc contain */
  .content { height: 200vh; background: linear-gradient(180deg, #fff, #f0f0f0); }
</style>
<body>
  
Kéo xuống không còn tải lại trang (pull-to-refresh disabled)
  
Cuộn thoải mái...
</body>

Kết quả mobile

• contain: Vẫn pull-to-refresh được trên body, nhưng element con không làm cuộn body
• none: Tắt hoàn toàn pull-to-refresh trên body

Lưu ý

• Hỗ trợ: Chrome 63+, Firefox 59+, Safari 16+, Edge 79+
• Safari iOS < 16 cần -webkit-overflow-scrolling: touch cho momentum scroll
• PWA: Thường dùng overscroll-behavior: none trên body để cảm giác như native app