十年专注于品牌网站建设 十余年专注于网站建设_小程序开发_APP开发,低调、敢创新、有情怀!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

关于scrollIntoView、scrollIntoViewIfNeeded、scrolIByLines、scroIIByPages方法的使用方法

百恒网络 2016-11-30 6510

关于scrollIntoView()、scrollIntoViewIfNeeded()、scrolIByLines()、scroIIByPages()方法在实际工作中用得不多,但偶尔也会用到,注重用户体验时,一些细节要做到位,有些不常用的方法也就要用下,DOM规范没有就如何滚动页面区域这个问题作出规定。为此,各种浏览器都实现了相应的方法, 用于以不同方式控制滚动。这些方法都是作为HTMLElement类型的扩展存在的,因此可以在所有元素上使用。

◎scrollIntoView(alignWi thTop):滚动浏览器窗◎或容器元素,以便在视◎(viewport)中看到当前元素。如果alignWi thTop的值为true,或者省略它,那么窗◎会尽可能滚动到自身顶部与元素顶部平齐。所有浏览器都实现了这个方法。

◎scrollIntoViewIfNeeded(alignCenter):只在当前元素在视◎中不可见的情况下,才滚动浏览器窗◎或容器元素,最终让当前元素可见。如果当前元素在视◎中可见,这个方法什么也不做。如果将可选的alignCenter参数设置为true,则表示尽量将元素显示在视◎中部(垂 直方向)。Safari和Chrome实现了这个方法。

◎scrolIByLines( lineCount):将元素的内容滚动指定的行数的高度,lineCount值可是正值,也可以是负值。Safari和Chrome实现了这个方法。

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

要注意的是,scrollIntoView()和scrollIntoViewIfNeeded()作用的是元素的窗◎,而scrolIByLines()和scrolIByPages()影响的则是元素自身。下面是几个示例:

//将页面主体滚动5行

document.body. scrollByLines(5);

//确保当前元素可见

document.forms[0].scrollIntoView();

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

document.Images[0].scrollIntoViewIfNeeded();

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

document.body. scrollByPages(-1);

〈b>南昌网站制作公司百恒网络开发工程师提告诉大家由于所有浏览器都支持方法只有scrollIntoView(),因此这个方法是最常用的。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×