滚动到可视区域 Element.scrollIntoView()

2020-01-08 17:00:29 阅读：374 来源： 互联网

标签：nearest end scrollIntoView 可视 element 滚动 Element block

Element.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 (可选)定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block (可选)定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline (可选)定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

示例：

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

在vue中使用：需求，一个滚动列表，根据某个条件要找到其中一列并显示在可视区域中

<template>
  <div class="list-wrap">
    <ul>
      <li v-for="(item,index) in 100" :key="index" :ref="`li${index+1}`"></li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      let _index = 10;
      this.$nextTick(() => {
        this.$refs[`li${_index + 1}`].scrollIntoView(); //定位到第几条的滚动位置
      })
    }
  }
</script>

浏览器兼容性：

标签：nearest,end,scrollIntoView,可视,element,滚动,Element,block
来源： https://www.cnblogs.com/tuspring/p/12050449.html

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

ICode9

滚动到可视区域 Element.scrollIntoView()