也许有人知道如何修复我的包包。
检测鼠标滚轮向上和向下的问题,同时也是 MAC OS 触摸板的问题。
如果我向下旋转,则需要将状态增加 1(参见代码),如果向上则减少 1。但是,如果向上滚动,它会进行太多次检测,向下同样。我不需要页面滚动。
我的代码如下:
const pages = [
{ name: "About", page: <About />, id: 1 },
{ name: "Contact", page: <Contact />, id: 2 },
{ name: "Hire Us", page: <HireUs />, id: 3 },
{ name: "Home", page: <Home />, id: 4 },
{ name: "Works", page: <Works />, id: 5 }
];
class App extends Component {
constructor() {
super();
this.state = {
item: 1
};
}
scrollSite(y) {
const pageLenght = pages.length - 1;
if (y < 0) {
console.log("slide up");
if (this.state.item < pageLenght) {
this.setState({ item: this.state.item + 1 });
} else if (this.state.item === pageLenght) {
this.setState({ item: 0 });
}
} else {
console.log("slide down");
if (this.state.item === 0) {
this.setState({ item: this.state.item - 1 });
} else if (this.state.item === pageLenght) {
this.setState({ item: 0 });
}
}
}
componentDidMount() {
window.addEventListener("wheel", e => {
this.scrollSite(e.wheelDelta);
});
}
render() {
const { item } = this.state;
return (
<div className="container">
<div className="navigation">
{pages.map(page => (
<div key={page.id}>{page.name}</div>
))}
</div>
<div>{pages[item].page}</div>
</div>
);
}
}
export default App;