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

overscroll-behavior-x屬性用於設置到達滾動區域的水平邊界時瀏覽器的行為。可以在有多個滾動區域且滾動一個區域不會影響整個頁麵的網站中使用此函數。

用法:

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

注意：滾動時可以通過使用Shift按鈕來測試水平滾動。

屬性值：

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

例：

<!DOCTYPE html> 
<html> 
<head> 
  <title> 
    CSS | overscroll-behavior-x 
  </title> 
  <style> 
    .main-content { 
      height:50px; 
      width:1000px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-x:auto; 
  
      height:250px; 
      width:300px; 
      overflow-x:scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    CSS | overscroll-behavior-x 
  </b> 
  <p> 
    overscroll-behavior-x:auto 
  </p> 
  <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. 
  </div> 
  <div class="smaller-box"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"> 
</img> 
  </div> 
</body> 
</html>

輸出：在較小的元素上水平滾動
auto

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

例：

<!DOCTYPE html> 
<html> 
<head> 
  <title> 
    CSS | overscroll-behavior-x 
  </title> 
  <style> 
    .main-content { 
      height:50px; 
      width:1000px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-x:contain; 
  
      height:250px; 
      width:300px; 
      overflow-x:scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    CSS | overscroll-behavior-x 
  </b> 
  <p> 
    overscroll-behavior-x:contain 
  </p> 
  <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. 
  </div> 
  <div class="smaller-box"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"> 
</img> 
  </div> 
</body> 
</html>

輸出：在較小的元素上水平滾動
contain

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

例：

<!DOCTYPE html> 
<html> 
<head> 
  <title> 
    CSS | overscroll-behavior-x 
  </title> 
  <style> 
    .main-content { 
      height:50px; 
      width:1000px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-x:none; 
  
      height:250px; 
      width:300px; 
      overflow-x:scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    CSS | overscroll-behavior-x 
  </b> 
  <p> 
    overscroll-behavior-x:none 
  </p> 
  <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. 
  </div> 
  <div class="smaller-box"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"> 
</img> 
  </div> 
</body> 
</html>

輸出：在較小的元素上水平滾動
none

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

例：

<!DOCTYPE html> 
<html> 
<head> 
  <title> 
    CSS | overscroll-behavior-x 
  </title> 
  <style> 
    .main-content { 
      height:50px; 
      width:1000px; 
      background-color:lightgreen; 
    } 
  
    .smaller-box { 
      overscroll-behavior-x:initial; 
  
      height:250px; 
      width:300px; 
      overflow-x:scroll; 
    } 
  </style> 
</head> 
<body> 
  <h1 style="color:green"> 
    GeeksforGeeks 
  </h1> 
  <b> 
    CSS | overscroll-behavior-x 
  </b> 
  <p> 
    overscroll-behavior-x:initial 
  </p> 
  <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. 
  </div> 
  <div class="smaller-box"> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"> 
</img> 
  </div> 
</body> 
</html>

輸出：在較小的元素上水平滾動
initial

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

支持的瀏覽器：overscroll-behavior-x屬性支持的瀏覽器如下所示：

chrome 63.0
Firefox 59.0
Opera 50.0

相關用法

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