css3的overflow-anchor
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的特性。
台式
手机/平板电脑
css3的overflow-anchor的更多相关文章
- CSS3：overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
- css3
CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼 转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...
- 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】
摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...
- CSS3 教程
CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! 更多:http://www.runoob.com ...
- CSS3 文本效果(阴影)
CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴 ...
- CSS3：CSS3 文本效果
ylbtech-CSS3:CSS3 文本效果 1.返回顶部 1. CSS3 文本效果 CSS3 文本效果 CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow bo ...
- css3之文本text-overflow 与 word-wrap, word-break
CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说 ...
- css3 练习
css3 文本效果 css3中包含几个新的文本特征 在本章中您将了解一下文本属性 text-shadow box-shadow word-wrap word-break css3 的文本阴影 css3 ...
随机推荐
- Sharepoint/Project Server 看不到“安全性”菜单以及子菜单
在Sharepoint/Project Server 构建后,左侧看不到看不到“服务器设置”菜单,在设置菜单后左侧出现“服务器设置”菜单,但是依然在右侧看不到“安全性”菜单以及子菜单. (这个图是借的 ...
- Git安全配置
今天收到了阿里云异地登录的短信报警,登录阿里云后台发现,有人从深圳登录了我的服务器(本人在北京),查看详细信息一共登录了5次,前两次是使用的git用户进行登录,后两次已经变成了root用户,怀疑是 ...
- 再也不用线上倒数据了，使用 Faker 来造一批假的数据吧。
背景每当建表之后,常常需要写一批假的数据,用于测试算法.数据量的压力测试.列表翻页. 查看详情.数据关联等.这时就需要借助一款造数据的工具,它就是今天所要介绍的 Faker. 介绍 Faker 这个工 ...
- 微软DevOps软件开发高级培训课程（深圳站） 2016.04.06
深圳特区云集了国内众多大型IT企业,作为北上广深的一线城市,当之无愧! 我们在深圳同方信息港的微软办公室是举行培训,60人的培训教室,生生被挤满了80人,过道都被全部占用了.可惜由于换了电脑,把照片搞 ...
- python 多线程示例
原文链接:http://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的 ...
- 2018年Android面试题含答案--适合中高级（下）
这里是我整理出来的面试题,答案我花了很久的时间.加上我自己的理解整理出来的,作者不易,请谅解.有答案的的:https://xiaozhuanlan.com/topic/6132940875 1.A ...
- bootstrap 常用class（不定时更新）
1,字体居右 text-right 2,字体居中 text-center
- Java并发工具类之CountDownLatch
CountDownLatch允许一个或则多个线程等待其他线程完成操作. 假如我们有这样的需求:我们需要解析一个excel文件中的多个sheet,我们可以考虑使用多线程,每一个线程解析excel中的一个 ...
- java.util包详解
介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结构.本章介绍Java的实用工具类库java.util包.在这个包中,Java提供了一些实用的方法和数据结 ...
- Python小白学习之路（二十一）—【迭代器】
迭代器 1.迭代器协议 对象必须提供一个 next 方法,执行该方法要么返回迭代中的下一项,要么就引起一个Stoplteration异常,以终止迭代(只能往后走不能往前退) 2.可迭代对象 实现了迭代 ...