关于scrollIntoView、scrollIntoViewIfNeeded、scrolIByLines、

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

关于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.huicuiwang.cn/如转载请注明出处!