IntersectionObserver.rootMargin

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
rootMargin
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 12.1
Notes
Full support 12.1
Notes
Notes rootMargin does not work with <iframe>s.
WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2
Notes
Full support 12.2
Notes
Notes rootMargin does not work with <iframe>s.
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.
相关主题