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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。