禁止屏幕滾動(dòng)
document.body.style.overflow = 'hidden'
視圖滾動(dòng)
<div class="box-content" id="nice-box" @click="doSth"></div>
//methods:
doSth() {
document.getElementById('nice-box').scrollIntoView({ behavior: 'smooth', block: 'end' })
},
MDN:
scrollIntoView()方法會(huì)滾動(dòng)元素的父容器豁翎，使被調(diào)用scrollIntoView()的元素對(duì)用戶可見。
[語法]
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數(shù)
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)
[參數(shù)]
alignToTop：可選毡们，一個(gè)Boolean值
- 如果為
true，元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊。相應(yīng)的scrollIntoViewOptions: {block: "start", inline: "nearest"}痢毒。這是這個(gè)參數(shù)的默認(rèn)值。 - 如果為
false蚕甥，元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊哪替。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions：可選菇怀，一個(gè)包含下列屬性的對(duì)象：
behavior可選：定義動(dòng)畫過渡效果凭舶，"auto"或"smooth"之一。默認(rèn)為"auto"爱沟。block可選：定義垂直方向的對(duì)齊帅霜，"start","center","end", 或"nearest"之一。默認(rèn)為"start"呼伸。inline可選：定義水平方向的對(duì)齊义屏，"start","center","end", 或"nearest"之一。默認(rèn)為"nearest"。
