blob: bbcb43a1460b16f84455dde9684fb92cd681b2ae (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
---
title: IntersectionObserver.rootMargin
slug: Web/API/IntersectionObserver/rootMargin
translation_of: Web/API/IntersectionObserver/rootMargin
---
<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
<p>{{domxref("IntersectionObserver")}} 接口的只读属性<strong><code>rootMargin</code></strong>是与CSS属性{{cssxref("margin")}}语法相似的字符串(string)对象. 在交叉检测开始之前，由<code>rootMargin规定的矩形的每一边都会被添加至</code>{{domxref("IntersectionObserver.root", "root")}}元素的边框盒({{Glossary("bounding box")}})的相应边。例如，这可以让你向外调整边界，使得目标元素被认为是100%可见的，即使此元素得一部分长或宽被裁剪，或者在边缘过于靠近根边框盒边界的情况下，将目标视为部分隐藏。</p>
<p>可参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解root margin的工作原理或如何使其与根的边框盒进行协同工作。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin;
</pre>
<h3 id="值">值</h3>
<p>一个字符串, 形式与CSS {{cssxref("margin")}}属性相似，包含了一条或一组根边框盒边的偏移量。这些偏移量会被添加至根边界盒与目标元素边界的交叉区域之前。</p>
<p>这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。</p>
<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">如果</font>rootMargin在对象初始化的时候未被指定，它将被设置成默认值</code><code>"0px 0px 0px 0px"，这将意味着在原根节点边界框与目标边界之间计算交叉值。</code> {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了rootMargin的更加深入的使用方法。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
<td>{{Spec2('IntersectionObserver')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<div>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
</div>
|
