您好,欢迎访问一九零五行业门户网

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被各浏览器均支持,所以这个方法最为常用
以上就是scrollintoview的使用实例的详细内容。
其它类似信息

推荐信息