在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

overscroll-behavior-x CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.

见 overscroll-behavior for a full explanation.

/* 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: unset;
					

句法

overscroll-behavior-x property is specified as a keyword chosen from the list of values below.

值

auto

The default scroll overflow behavior occurs as normal.

contain

Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.

none

No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.

形式定义

初始值	auto
适用于	non-replaced block-level elements and non-replaced inline-block elements
继承	no
计算值	如指定
动画类型	discrete

形式句法

contain | none | auto
					

范例

Preventing an underlying element from scrolling horizontally

In our simple overscroll-behavior-x example (见 source code also), we have two block-level boxes, one inside the other. The outer box has a large width set on it so the page will scroll horizontally. The inner box has a small width (and height ) set on it so it sits comforably inside the viewport, but its content is given a large width so it will scroll horizontally.

By default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set overscroll-behavior-x: contain on the inner box:

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

规范

规范	状态	注释
CSS Overscroll Behavior Module Level 1 The definition of 'overscroll-behavior-x' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
overscroll-behavior-x	Chrome 完整支持 63	Edge 部分支持 18 注意事项 部分支持 18 注意事项 注意事项 Currently the none value incorrectly behaves as contain (allowing for the elastic bounce effect).	Firefox 完整支持 59	IE 不支持 No	Opera 完整支持 50	Safari 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 176454 .	WebView Android 完整支持 63	Chrome Android 完整支持 63	Firefox Android 完整支持 59	Opera Android 完整支持 46	Safari iOS 不支持 No 注意事项 不支持 No 注意事项 注意事项 见 bug 176454 .	Samsung Internet Android 完整支持 8.0

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

另请参阅

• Take control of your scroll: customizing pull-to-refresh and overflow effects
• The mapped logical properties: overscroll-behavior-inline , overscroll-behavior-block

元数据

• 最后修改： Aug 5, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Box Model
4. 指南

   1. CSS 基本 Box 模型介绍
   2. Mastering margin collapsing
5. 特性

   1. height
   2. margin-bottom
   3. margin-left
   4. margin-right
   5. margin-top
   6. margin-trim
   7. max-height
   8. max-width
   9. min-height
   10. min-width
   11. overscroll-behavior
   12. overscroll-behavior-block
   13. overscroll-behavior-inline
   14. overscroll-behavior-x
   15. overscroll-behavior-y
   16. padding
   17. padding-bottom
   18. padding-left
   19. padding-right
   20. padding-top
   21. visibility
   22. width