这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
IntersectionObserver
接口的只读属性rootMargin
是与CSS属性margin
语法相似的字符串(string)对象. 在交叉检测开始之前,由rootMargin规定的矩形的每一边都会被添加至
root
元素的边框盒(bounding box)的相应边。例如,这可以让你向外调整边界,使得目标元素被认为是100%可见的,即使此元素得一部分长或宽被裁剪,或者在边缘过于靠近根边框盒边界的情况下,将目标视为部分隐藏。
可参考The root element and root margin in Intersection Observer API来深入了解root margin的工作原理或如何使其与根的边框盒进行协同工作。
语法
var marginString =
IntersectionObserver.rootMargin;
值
一个字符串, 形式与CSS margin
属性相似,包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。
这个属性返回的字符串也许会与IntersectionObserver
被配置时所指定的值有所差别。浏览器可以改变这些值。
如果rootMargin在对象初始化的时候未被指定,它将被设置成默认值
"0px 0px 0px 0px",这将意味着在原根节点边界框与目标边界之间计算交叉值。
The root element and root margin in Intersection Observer API 描述了rootMargin的更加深入的使用方法。
规范
规范 | 状态 | 备注 |
---|---|---|
Intersection Observer IntersectionObserver.rootMargin |
Working Draft | Initial definition |
浏览器兼容
The compatibility table in 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rootMargin | Chrome Full support 51 | Edge Full support 15 | Firefox
Full support
55
| IE No support No | Opera Full support Yes | Safari
Full support
12.1
| WebView Android Full support 51 | Chrome Android Full support 51 | Firefox Android ? | Opera Android ? | Safari iOS
Full support
12.2
| Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.