DOM 通灵术

栏目: 后端 · 前端 · 发布时间: 7年前

内容简介:DOM 通灵术

DOM 通灵术可以召唤某一个 DOM 节点,让它出现在当前视图中。除了常用的锚点定位,利用 focus 定位外,还有两个更为神奇的方法。

Element.scrollIntoViewIfNeeded( opt_center )

Webkit 家族的特有属性,当参数为 True 的时候,该元素会出现到它祖先滚动元素在当前视图的正中间。如果为 False ,它会滚动到离它最近的一边边沿。换句话说,如果该元素在视图可见区域下方,它将出现在视图可见区域内部下方,可是区域上方亦然。若参数为空,则默认参数为 True 。该特性有意思的一点是,若该元素已经可见了,就不会执行任何动作,这也是 IfNeeded 含义所在吧。

DOM 通灵术

该方法不是标准规范,属性支持度如上所示,没有 Webkit 血继界限的浏览器是不支持该方法的。

Element.scrollIntoView( opt_top )

当参数为 True 的时候,该元素会出现到它祖先滚动元素在当前视图的最上方。如果为 False ,它会滚动到视图最下方。若参数为空,则默认参数为 True 。与 scrollIntoViewIfNeeded 不同的是,就算元素在视图中,他也会执行该方法的。

除此之外,它还可以接受一个对象作为参数。其中 block: 'start' 对应参数 Trueblock: 'end' 对应参数 Flasebehavior 参数可以指定元素出现的方式,自动,立即亦或是平滑。但这个参数目前只有 Firefox 支持,其它浏览器都只支持布尔值参数。

{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "end",
}

DOM 通灵术


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大数据之眼

大数据之眼

[德]尤夫娜·霍夫施泰特 / 陈巍 / 浙江文艺出版社 / 2018-5-7 / 68.00元

德国狂销10万册的大数据商业应用畅销书,经典之作《大数据时代》的姊妹篇。 该书在德语国家促发了一场关于大数据,人工智能与人的关系建构的大讨论。 德国大数据与人工智能领域权威,首度为中国读者亲笔作序。 在后大数据时代,如何维护自己的隐私,如何巧妙利用资源获得更多金钱? 一部对大数据发展所产生的问题进行思考和规避的先知式作品。 当智能机器欲“优化”我们,入侵我们的生活,统......一起来看看 《大数据之眼》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具