diff options
Diffstat (limited to 'files/zh-cn/web/api/intersectionobserver/rootmargin')
| -rw-r--r-- | files/zh-cn/web/api/intersectionobserver/rootmargin/index.html | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html new file mode 100644 index 0000000000..dc5c913927 --- /dev/null +++ b/files/zh-cn/web/api/intersectionobserver/rootmargin/index.html @@ -0,0 +1,48 @@ +--- +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 class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p> +</div> |