html元素滚动定位方法

2020-12-04 20:01:22 阅读：409 来源： 互联网

标签：定位滚动 nearest scrollIntoView 滚动条 start html scrollTop block

最近做的项目中有一个需要定位到选中列表位置，使所选内容始终显示在列表显示范围内的需求，类似于这种：
在这里插入图片描述
趁此机会整理了几种常用的滚动定位的方法，希望对大家有所帮助。

scrollIntoView()方法

语法：element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

      *alignToTop: 一个Boolean值，
      			如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
      			如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
      *scrollIntoViewOptions ：一个对象，有behavior，block ，inline 几个属性。
                behavior定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
                block定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
                inline定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
     例如：

//jquery
$("#main")[0].scrollIntoView();
//js
 document.querySelector("#main").scrollIntoView();

scrollTop()

scrollTop()方法设置或返回被选元素的垂直滚动条位置。当滚动条位于最顶部时，位置是 0。

当用于返回位置时：
该方法返回第一个匹配元素的滚动条的垂直位置。例：$(selector).scrollTop()

当用于设置位置时：
该方法设置所有匹配元素的滚动条的垂直位置。例：$(selector).scrollTop(position)

<div id="scroll">
    ...
    <div id="target">...</div>
    ...
</div>

var container = $("#scroll");
var scrollTo = $("#target");
var num = scrollTo.offset().top - container.offset().top + container.scrollTop();

container.animate({ scrollTop: num },2000);

标签：定位,滚动,nearest,scrollIntoView,滚动条,start,html,scrollTop,block
来源： https://blog.csdn.net/baidu_41904590/article/details/110670955

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html元素滚动定位方法

scrollIntoView()方法

scrollTop()