overscroll-behavior-x

語法

/* Keyword values */
overscroll-behavior-x: auto; /* default */
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/* Global values */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

overscroll-behavior-x 屬性被指定為從以下值列表中選擇的關鍵字。

值

auto

預設的滾動溢位行為正常發生。

contain

在此值設定的元素內部，會觀察到預設的滾動溢位行為（例如，“彈跳”效果）。但是，在相鄰的滾動區域上不會發生滾動鏈；底層元素不會滾動。contain 值會停用原生的瀏覽器導航，包括垂直的下拉重新整理手勢和水平滑動導航。

none

鄰近的滾動區域不會發生滾動連結，並且會阻止預設的滾動溢位行為。

正式定義

正式語法

overscroll-behavior-x = 
  contain  |
  none     |
  auto     

示例

防止底層元素水平滾動

在我們的 overscroll-behavior-x 示例（另請參閱原始碼）中，我們有兩個塊級盒子，一個在另一個裡面。外層盒子設定了很大的 width，以便頁面可以水平滾動。內層盒子設定了較小的寬度（和 height），因此它可以舒適地放在視口內，但其內容被賦予了較大的 width，以便它可以水平滾動。

預設情況下，當內層盒子滾動併到達滾動邊界時，整個頁面將開始滾動，這可能不是我們想要的效果。為避免這種情況，你可以在內層盒子上設定 overscroll-behavior-x: contain。

main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

規範

瀏覽器相容性

另見

• overscroll-behavior
• overscroll-behavior-y
• overscroll-behavior-inline
• overscroll-behavior-block
• CSS overscroll behavior 模組