initial commit

2 files changed, 179 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
new file mode 100644
index 0000000000..6a0f3b43f8
--- /dev/null
+++ b/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html
@@ -0,0 +1,92 @@
+---
+title: Guide to scroll anchoring
+slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+---
+<div>{{CSSRef}}</div>
+
+<p>As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.</p>
+
+<p>Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.</p>
+
+<h2 id="How_does_it_work">How does it work?</h2>
+
+<div class="blockIndicator warning">
+<p>Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how <em>far</em> they have moved through the document.</p>
+</div>
+
+<h2 id="How_do_I_turn_on_scroll_anchoring">How do I turn on scroll anchoring?</h2>
+
+<p>You don't! The feature is enabled by default in supporting browsers. In most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.</p>
+
+<h2 id="What_if_I_need_to_debug_it">What if I need to debug it?</h2>
+
+<p>If your page is not behaving well with scroll anchoring enabled, it is probably because some <code>scroll</code> event listener is not handling well the extra scrolling to compensate for the anchor node movement.</p>
+
+<p>You can check whether disabling scroll anchoring fixes the issue in Firefox by changing <code>layout.css.scroll-anchoring.enabled</code> to <code>false</code> in <code>about:config</code>.</p>
+
+<p>If it does, you can check what node is Firefox using as the anchor using the <code>layout.css.scroll-anchoring.highlight</code> switch. That will show a purple overlay on top of the anchor node.</p>
+
+<p>If one node doesn't seem appropriate to be an anchor, you can exclude it using {{cssxref("overflow-anchor")}}, as described below.</p>
+
+<h2 id="What_if_I_need_to_disable_it">What if I need to disable it?</h2>
+
+<p>The specification provides a new property, {{cssxref("overflow-anchor")}}, which can be used to disable scroll anchoring on all or part of the document. It's essentially a way to opt out of the new behavior.</p>
+
+<p>The only possible values are <code>auto</code> or <code>none</code>:</p>
+
+<ul>
+ <li><code>auto</code> is the initial value; as long as the user has a supported browser the scroll anchoring behavior will happen, and they should see fewer content jumps.</li>
+ <li><code>none</code> means that you have explicitly opted the document, or part of the document, out of scroll anchoring.</li>
+</ul>
+
+<p>To opt out the entire document, you can set it on the {{htmlelement("body")}} element:</p>
+
+<pre class="brush: css notranslate">body {
+  overflow-anchor: none;
+}</pre>
+
+<p>To opt out a certain part of the document use <code>overflow-anchor: none</code> on its container element:</p>
+
+<pre class="brush: css notranslate">.container {
+  overflow-anchor: none;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The specification details that once scroll anchoring has been opted out of, you cannot opt back into it from a child element. For example, if you opt out for the entire document, you will not be able to set <code>overflow-anchor: auto</code> elsewhere in the document to turn it back on for a subsection.</p>
+</div>
+
+<h3 id="Suppression_triggers">Suppression triggers</h3>
+
+<p>The specification also details some <em>suppression triggers</em>, which will disable scroll anchoring in places where it might be problematic. If any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed.</p>
+
+<p>These suppression triggers are changes to the computed value of any of the following properties:</p>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, or {{cssxref("bottom")}}</li>
+ <li>{{cssxref("margin")}} or {{cssxref("padding")}}</li>
+ <li>Any {{cssxref("width")}} or {{cssxref("height")}}-related properties</li>
+ <li>{{cssxref("transform")}}</li>
+</ul>
+
+<p>Additionally, {{cssxref("position")}} changes anywhere inside the scrolling box also disable scroll anchoring.</p>
+
+<div class="blockIndicator note">
+<p>In {{bug(1584285)}} the <code>layout.css.scroll-anchoring.suppressions.enabled</code> flag was added to Firefox Nightly in order to allow the disabling of these triggers.</p>
+</div>
+
+<h2 id="Further_reading">Further reading</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Explainer document on the WICG site</a></li>
+ <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">Scroll anchoring for web developers on the Chromium blog</a></li>
+ <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implement a pin-to-bottom scrolling element using scroll anchoring</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>If you need to test whether scroll anchoring is available in a browser, use <a href="/en-US/docs/Web/CSS/@supports">Feature Queries</a> to test support for the <code>overflow-anchor</code> property.</p>
+
+
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
diff --git a/files/zh-cn/web/css/overflow-anchor/index.html b/files/zh-cn/web/css/overflow-anchor/index.html
new file mode 100644
index 0000000000..42150355bf
--- /dev/null
+++ b/files/zh-cn/web/css/overflow-anchor/index.html
@@ -0,0 +1,87 @@
+---
+title: overflow-anchor
+slug: Web/CSS/overflow-anchor
+tags:
+  - CSS
+  - CSS Scroll Anchoring
+translation_of: Web/CSS/overflow-anchor
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-anchor</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。</p>
+
+<p>默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。因此，仅当您在文档或文档的一部分中遇到滚动锚定问题并且需要关闭行为时，才通常需要更改此属性的值。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* Global values */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>The element becomes a potential anchor when adjusting scroll position.</dd>
+ <dt><code>none</code></dt>
+ <dd>The element won't be selected as a potential anchor.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="范例">范例</h2>
+
+<p>To prevent scroll anchoring in a document, use the <code>overflow-anchor</code> property.</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+}
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td>
+   <td>{{Spec2('CSS Scroll Anchoring')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">Guide to scroll anchoring</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 385px; top: 1589px;">
+<div class="gtx-trans-icon"></div>
+</div>