js实现鼠标左右滑动,到底(或者回到开头)变为上下滑动
2023-04-07 13:38
1636
js实现鼠标左右滑动,到底(或者回到开头)变为上下滑动
data() {
return {
leftNum: 0,
crossrange: true
};
},
mounted() {
const scrollContainer = this.$refs.scrollContainer;
window.addEventListener('scroll', this.handleScroll);
scrollContainer.addEventListener(
"wheel",
(e) => {
if (window.innerWidth > 768 && this.crossrange == true) {
e.preventDefault(); // disallows scrolling vertically
scrollContainer.scrollLeft += e.deltaY; // scrolls container left by deltaY
if (this.leftNum == scrollContainer.scrollLeft) {
this.crossrange = false;
} else {
this.crossrange = true;
}
console.log("scroll", scrollContainer.scrollLeft);
this.leftNum = scrollContainer.scrollLeft;
}
},
{ passive: false }
);
},
methods: {
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.crossrange = true;
}
},
0 条讨论