在我的場景中，代碼應該阻止默認滾動事件，并scrollIntoView()根據滾動方向將用戶移動到特定部分。
https://stackoverflow.com/a/4770179/9164633 我使用這種方法來防止滾動默認事件。
我像這樣檢測方向，
preventDefault(e) {
e.preventDefault();
if(this.waiting == false && this.forceInitialScroll != true) {
if(e.deltaY && e.deltaY > 7) {
this.scrollDirection = 'down';
this.checkScroll()
}else if(e.deltaY && e.deltaY < -7) {
this.scrollDirection = 'up';
this.checkScroll()
}else {
}
}
},
and Im pretty sure that both are working fine.
在阻止滾動并檢測滾動方向后，我嘗試將用戶滾動到這樣的部分，
checkScroll() {
let element;
if(this.scrollDirection == 'down' && this.scrollIndex != 4 ) {
element = document.getElementById(`section-${this.scrollIndex 1}`);
}else if(this.scrollDirection == 'up' && this.scrollIndex != 0) {
element = document.getElementById(`section-${this.scrollIndex-1}`);
}
this.waiting = true;
if(element) {
console.log(element)
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
}
setTimeout(() => {
if(this.waiting == true) {
this.waiting = false;
this.scrollDirection = null;
}
}, 450)
},
this.waiting用于防止用戶表單一次滾動多個部分。
在 Firefox 上，瀏覽器雖然在 chrome 上作業正常，但無法正確滾動用戶。
uj5u.com熱心網友回復：
顯然，Firefox 的行為event.preventDefault()是它阻止了任何型別的用戶滾動，甚至是 js 手動滾動。
通過使用overflow: hidden;然后手動控制滾動而不是阻止默認行為，將滾動隱藏在 css 而不是 js 中，解決了我的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/346993.html
標籤：javascript Vue.js 火狐 滚动