CSS overscroll-behavior-y用法及代碼示例

overscroll-behavior-y屬性用於設置到達滾動區域的垂直邊界時瀏覽器的行為。可以在有多個滾動區域且滾動一個區域不會影響整個頁麵的網站中使用此函數。該效果稱為scroll-chaining，可以相應地啟用或禁用該效果。

用法:

overscroll-behavior-y:auto | contain | none | initial | inherit

屬性值：

auto:這用於將所有元素的滾動行為設置為默認。即使到達元素的邊界，整個頁麵也會滾動。它是默認值。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    CSS | overscroll-behavior-y 
  </title> 
  
  <style> 
    .container { 
      display:flex; 
    } 
  
    .main-content { 
      width:200px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-y:auto; 
  
      height:100px; 
      width:125px; 
      margin:25px; 
      overflow-y:scroll; 
    } 
  </style> 
</head> 
  
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  
  <b>CSS | overscroll-behavior-y</b> 
  <p>overscroll-behavior-y:auto</p> 
  
  <div class="container"> 
    <div class="main-content"> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections.<br><br> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections. 
    </div> 
    <div class="smaller-box"> 
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached. 
    </div> 
  </div> 
</body> 
  
</html>

輸出：向下滾動到較小的元素
auto

contain:它用於將滾動行為設置為僅在所使用的元素上默認。在相鄰的滾動區域上不會出現scroll-chaining，並且後麵的元素也不會滾動。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    CSS | overscroll-behavior-y 
  </title> 
  
  <style> 
    .container { 
      display:flex; 
    } 
  
    .main-content { 
      width:200px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-y:contain; 
  
      height:100px; 
      width:125px; 
      margin:25px; 
      overflow-y:scroll; 
    } 
  </style> 
</head> 
  
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  
  <b>CSS | overscroll-behavior-y</b> 
  <p>overscroll-behavior-y:contain</p> 
  
  <div class="container"> 
    <div class="main-content"> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections.<br><br> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections. 
    </div> 
    <div class="smaller-box"> 
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached. 
    </div> 
  </div> 
</body> 
  
</html>

輸出：向下滾動到較小的元素
contain

none:它用於防止所有元素上的scroll-chaining。還可以防止默認的滾動溢出行為。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    CSS | overscroll-behavior-y 
  </title> 
  
  <style> 
    .container { 
      display:flex; 
    } 
  
    .main-content { 
      width:200px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-y:none; 
  
      height:100px; 
      width:125px; 
      margin:25px; 
      overflow-y:scroll; 
    } 
  </style> 
</head> 
  
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  
  <b>CSS | overscroll-behavior-y</b> 
  <p>overscroll-behavior-y:none</p> 
  
  <div class="container"> 
    <div class="main-content"> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections.<br><br> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections. 
    </div> 
    <div class="smaller-box"> 
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached. 
    </div> 
  </div> 
</body> 
  
</html>

輸出：向下滾動到較小的元素
none

initial:用於將過度滾動行為設置為默認值。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> 
    CSS | overscroll-behavior-y 
  </title> 
  
  <style> 
    .container { 
      display:flex; 
    } 
  
    .main-content { 
      width:200px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-y:initial; 
  
      height:100px; 
      width:125px; 
      margin:25px; 
      overflow-y:scroll; 
    } 
  </style> 
</head> 
  
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  
  <b>CSS | overscroll-behavior-y</b> 
  <p>overscroll-behavior-y:initial</p> 
  
  <div class="container"> 
    <div class="main-content"> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections.<br><br> 
      GeeksforGeeks is a computer science 
      portal with a huge variety of well 
      written and explained computer science 
      and programming articles, quizzes and 
      interview questions. The portal also 
      has dedicated GATE preparation and 
      competitive programming sections. 
    </div> 
    <div class="smaller-box"> 
      This is a smaller element that is also 
      scrollable. The overscroll behavior 
      can be used to control if the main 
      content behind would scroll when this 
      element's vertical boundary is reached. 
    </div> 
  </div> 
</body> 
  
</html>

輸出：向下滾動到較小的元素
initial

inherit:它用於設置滾動行為以從父級繼承。

支持的瀏覽器：下麵列出了overscroll-behavior-y屬性支持的瀏覽器：

chrome 63.0
Firefox 59.0
Opera 50.0

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 CSS | overscroll-behavior-y Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。