overscroll-behavior-inline

在此页

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

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

见 overscroll-behavior for a full explanation.

/* Keyword values */
overscroll-behavior-inline: auto; /* default */
overscroll-behavior-inline: contain;
overscroll-behavior-inline: none;
/* Global values */
overscroll-behavior-inline: inherit;
overscroll-behavior-inline: initial;
overscroll-behavior-inline: unset;

句法

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

值

auto
contain
none

形式定义

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

形式句法

contain | none | auto

范例

Preventing inline overscrolling

In this demo 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 also 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 happening in the inline direction, we've set overscroll-behavior-inline: contain on the inner box.

HTML

<main>
  <div>
    <div>
      <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
    </div>
  </div>
</main>

CSS

main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}
div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}
p {
  padding: 10px;
  background-color: rgba(255,0,0,0.5);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

结果

规范

规范	状态	注释
CSS Overscroll Behavior Module Level 1 The definition of 'overscroll-behavior-inline' 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-inline`	Chrome 完整支持 77	Edge 完整支持 79	Firefox 完整支持 73	IE 不支持 No	Opera 完整支持 64	Safari 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 176454 .	WebView Android 完整支持 77	Chrome Android 完整支持 77	Firefox Android 不支持 No	Opera Android 完整支持 55	Safari iOS 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 176454 .	Samsung Internet Android 完整支持 12.0

图例

完整支持
不支持
见实现注意事项。

另请参阅

Take control of your scroll: customizing pull-to-refresh and overflow effects

元数据

最后修改： Aug 5, 2020

CSS
CSS 参考
CSS Box Model
指南
1. CSS 基本 Box 模型介绍
2. Mastering margin collapsing
特性
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

在此页

句法

值