vue 点击div 获取位置_vue 点击元素滚动到指定位置
- {{item}}
data() {return{
navgator: ['列表A','列表B','列表C','列表D',
],
navgatorIndex:0,
listBox: ['A','B','C','D'],
listBoxState:true,//點擊導航欄時，暫時停止監聽頁面滾動
};
},
created() {
},
mounted() {
let timeId;
window.addEventListener('scroll', () =>{//頁面滾動停止100毫秒后才會執行下面的函數。
clearTimeout(timeId);
timeId= setTimeout(() =>{this.scrollToTop();
console.log('執行完了哦');
},100);
} ,true);
},
methods: {//點擊導航菜單，頁面滾動到指定位置
handleLeft(index) {this.navgatorIndex =index;this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior:"smooth", //平滑過渡
block: "start" //上邊框與視窗頂部平齊。默認值
});this.listBoxState=false;
let timeId;
clearTimeout(timeId);
timeId= setTimeout(() =>{this.listBoxState=true;
},200);
},//監聽頁面元素滾動，改變導航欄選中
scrollToTop() {//獲取視窗高度
var domHight =document.body.offsetHeight;//dom滾動位置
var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;if (this.listBoxState) {//作用是點擊導航欄時，延遲這里執行。
this.listBox.map((v,i) =>{//獲取監聽元素距離視窗頂部距離
var offsetTop =document.getElementById(`id${i}`).offsetTop;//獲取監聽元素本身高度
var scrollHeight =document.getElementById(`id${i}`).scrollHeight;//如果 dom滾動位置 >= 元素距離視窗距離 && dom滾動位置 <= 元素距離視窗距離+元素本身高度//則表示頁面已經滾動到可視區了。
if (scrollTop >= offsetTop && scrollTop<=(offsetTop+scrollHeight)) {//導航欄背景色選中
this.navgatorIndex =i;
}
})
}
},
},
}
width:100%;
background: #ededed;
}
.navgator {
width: 200px;
position:fixed;
top:0;
.navgatorLi {
width:100%;
height: 1rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-top: none;
}
.isActive {
color: #fff;
background: darkseagreen;
}
}
.rightList {
width: 560px;
margin-left : 200px;
li {
width:100%;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
}
總結
以上是生活随笔為你收集整理的vue 点击div 获取位置_vue 点击元素滚动到指定位置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： listbox wpf 取消边框_停止使
- 下一篇： html5倒计时秒杀怎么做,vue 设