技術標籤：jsjs

關於滾動，肯定要內部容器寬 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" });
}