overflow-anchor屬性使我們能夠選擇退出滾動錨定，這是一個瀏覽器特性，旨在允許內容在用戶當前的DOM位置上加載，而不需要在內容完全加載后更改用戶的位置。
為何要有這個屬性？
滾動錨定是一種瀏覽器特性，它試圖阻止一種常見的情況，在DOM完全加載之前，你可以向下滾動一個網頁，當它完成時，任何加載到當前位置的元素都會把你推到頁面的下方。
這是有道理的，為什么會這樣。
有一些CSS屬性，我們應用於那些賦予它們大小（例如寬度）、形狀（如轉換）和位置（例如空白）的元素。
如果這些元素在我們在頁面上滾動的時候沒有加載，那么DOM將繼續加載它們，即使它們位於我們當前的viewport之外，並且會在物理上擴展，為那些新加載的元素騰出空間。
隨着DOM的增長，我們在頁面上的位置會發生變化，以適應這些元素。
滾動錨定可以防止“跳躍”體驗，因為在當前位置上方的DOM中發生變化時，鎖定用戶在頁面上的位置。
這允許用戶在頁面上停留的位置，即使新元素被加載到DOM中。
overflow-anchor屬性允許我們在事件中選擇退出滾動錨定特性，因為它更傾向於允許內容在加載元素時重新流動。
語句
section { overflow-anchor: [auto | none]; }
值域
- auto（默認）：滾動事件使頁面高度或寬度發生了改變，滾動條不會因此而改變指向的內容，而。允許滾動錨定。
- none：滾動事件使頁面高度或寬度發生了改變，滾動條指向的內容也會隨之而變。禁止滾動錨定。
你可能會把它應用到身體上，但是你可以把它作用到任何選擇器上，如果這個元素滾動，它就會受到影響。
代碼實例
在這個演示中，當你在其中一個盒子里滾動時，它會在這個div的頂部添加一堆紅色的框，通常會立即將內容向下推，這可能會讓你分心，在文本中失去你的位置。
用過流錨：自動;滾動的位置被保留。
overflow-anchor:沒有;
允許新插入的div影響滾動位置。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="木人子韋一日塵">
<meta name="QQ" content="2309485575">
<title>overflow-anchor</title>
</head>
<body >
<div style="width:200px;float:left;">
<h1>
overflow-anchor：auto；
</h1>
<div style="height:400px;overflow-y:scroll;overflow-anchor:none;" onscroll="
if(this.scrollTop>20){
var divTag=document.createElement('div');
divTag.setAttribute('style','margin:5px;width:100%;height:100px;background-color:red;');
if(this.children[0].children.length<10){
this.children[0].appendChild(divTag);
}
}
">
<div ></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae.
</p>
</div>
</div>
<div style="width:200px;float:right;">
<h1>
overflow-anchor：none；
</h1>
<div style="height:400px;overflow-y:scroll;overflow-anchor:auto;" onscroll="
if(this.scrollTop>20){
var divTag=document.createElement('div');
divTag.setAttribute('style','margin:5px;width:100%;height:100px;background-color:red;');
if(this.children[0].children.length<10){
this.children[0].appendChild(divTag);
}
}
">
<div></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, tempore, esse ab obcaecati dicta maiores dolore voluptate doloribus vitae odit veniam dignissimos expedita reiciendis quos dolor incidunt repellat perspiciatis beatae.
</p>
</div>
</div>
</body>
</html>
我用手指滾動差不多的滾動距離
瀏覽器兼容性
在撰寫本文時，over流量錨並不是當前的W3C標准，盡管該規范草案的報告草案可供閱讀，並且自第56版以來已被Chrome采用。
Mozilla也在考慮在Firefox中使用類似的功能。
隨着越來越多的瀏覽器采用滾動錨定功能，我們可能會看到更多的瀏覽器支持流錨，因為它提供了顯式的控制來選擇退出功能。
這個瀏覽器支持數據來自Caniuse，它有更多的細節。
一個數字表示瀏覽器支持該版本和up的特性。
台式
手機/平板電腦
