DOM 通灵术

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

内容简介: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 通灵术


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

查看所有标签

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

设计之下

设计之下

搜狐新闻客户端UED团队 / 电子工业出版社 / 2014-1-1 / CNY 69.00

形而上者谓之道,形而下者谓之器。匠者,器也。处身平凡的匠人不断追求向上的设计之道。本书没有华丽的辞藻和长篇大论的理论,作者是搜狐一线的设计团队,写作过程中他们尽力还原真实的工作场景,并总结出了一些实用的经验和方法。 《设计之下》共三部分,全面讲解了用户体验设计的流程和方法。第一部分为“交互设计”,阐述了从项目启动、解析需求到原型设计的过程,并且总结了交互设计的要点:大局观、操作流程简捷、形式......一起来看看 《设计之下》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

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

HEX CMYK 互转工具

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

HSV CMYK互换工具