scrollIntoView

DOM的滚动

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用。

1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。如果当前元素在视窗中可见,这个方法不做任何处理。如果将可选参数alignCenter设置为true,则表示尽量将元素显示在视窗中部(垂直方向)------Safari、Chrome实现了这个方法

3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度,lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法

4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度,具体高度由元素的高度决定。---Safari、Chrome实现了这个方法

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口,而scrollByLines()、scrollByPages()影响元素自身,下面是几个示例:

//将页面主体滚动5行

document.body.scrollByLines(5);

//确保当前元素可见

document.getElementById(“test”).scrollIntoView();   //

//true:对象的顶端与当前窗口的顶部对齐

//false:对象的底端与当前窗口的顶部对齐

//确保只在当前元素不可见的情况下才使其可见

document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页

doument.body.scrollByPages(-1);

由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用

时间: 2024-10-12 17:22:00

scrollIntoView的相关文章

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

横向滚动视图scroll-into-view不起作用

横向视图scroll-into-view指定的id为hpink,但是效果图中显示的还是第1个view(未达到效果); 纵向视图scroll-into-view指定的id为yellowgreen,效果图中显示的则是yellowgreen(达到了效果);

scrollIntoView调用元素

scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop 若为 true,或者什么都不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐: alignWithTop 若为 false,调用元素会尽可能全部出现在视口中,可能的话,调用元素的底部会与视口顶部平齐,不过顶部不一定平齐.

全栈JavaScript之路( 二十一)HTML5 scrollIntoView方法

HTML5中,scrollIntoView()可以在所有HTML 元素上调用 通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中. 如果给这个方法传入true 作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视窗顶部尽可能平齐. 如果传入false 作为参数,调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视窗顶部平齐.)不过顶部不一定平齐. 当页面发生变化时,一般会用这个方法来吸引用户的注意力. 实际上,为某个元素设置焦点也会导致浏览器滚动并显示出获

如何定位到append的当前位置,不用拉滚动条scrollIntoView方法

1 var bb_mes_con = $('bb_mes_con'); 2 var mes_html = document.createElement('div'); 3 mes_html.setAttribute('id', 'mes_html'); 4 mes_html.innerHTML = "<span class='bot'></span><span class='top'></span>"+data; 5 bb_mes_con

JS的scrollIntoView

scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐:如果alignWithTop为false,则元素下边框与视窗底部齐平 例: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

HTML5 新的API 窗口可视区 scrollIntoView

scrollIntoView方法有两个参数 布尔值 true 和 false  使用true或者空会让调用这个方法的元素和浏览器顶部对齐 出现在可视区,使用参数false 也会出现可视区,但是不会和顶部对齐,它会和顶部有一段的距离. 调用方法: document.getElementsByTagName("ul")[0].scrollIntoView(true); ul就会出现在可视区,省去了我们要算scrollTop等一些算法.相信对很多效果都非常有帮助.浏览器支持情况:高等浏览器支

js中scrollIntoView()的用法

一. 什么是scrollIntoView scrollIntoView是一个与页面(容器)滚动相关的API 二. 如何调用 element.scrollIntoView() 参数默认为true 参数为true:调用该函数,页面发送滚动,使element的顶部与视图(容器)顶部对齐 参数为false:使element的底部与视图(容器)底部对齐 三. 使用场景 在selenium+webdriver(python语言)做元素定位时,有的元素在页面的不可见区域,这时候需要scrollIntoView

关于scrollintoview()真的是有意思极了,结合普通tab切换一起看看

scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true或者是false哦.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐. 我们见动图 见代码 scrollIntoView还可以实现类似于我们常见的tab切换的效果 一些具体的效果见动图 代码如下 使用scrollIntoView实现tab切换和直接使用jq