关于滚动,肯定要内部容器宽 or 高 大于外部容器才会发生滚动。

那么如何在组件加载之后,就自动将想看到的指定内容滚动到可视区域呢?(如过指定内容初始被隐藏)

知识点:
【scrollIntoView】
scrollIntoView()是有一些参数的,详情可参考⬆️

scrollIntoView() 方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。

语法:

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

默认html样式如下:
在这里插入图片描述

使用scrollIntoView()
代码如下:

// html
<div>
   <ul>
        <li v-for="item in list" :key="item.id" :id="'id-'+item.id">{{item.name}}</li>
   </ul>
</div>


//数据
data() {
    return {
      list: [
        { id: 1, name: "李1", status: 0 },
        { id: 2, name: "李2", status: 1 },
        { id: 3, name: "李3", status: 1 },
        { id: 4, name: "李4", status: 1 },
        { id: 5, name: "李5", status: 1 },
        { id: 6, name: "李6", status: 0 },
        { id: 7, name: "李7", status: 1 },
        { id: 8, name: "李8", status: 1 },
        { id: 9, name: "李9", status: 0 },
        { id: 10, name: "李10", status: 1 }
      ]
    };
  }


// 方法
scrollInToView(){
	let ele = document.getElementById("id-7");
    ele.scrollIntoView({ block: "start", behavior: "smooth" });
}

在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐