我正在尝试创建一个网站，用户可以在其中滚动浏览图标来选择他们想要做的事情。该页面上的下划线是无用的下划线。下一个图标是关于图标，最后一个图标是用于作业。但是出于某种奇怪的原因，当我有时重新加载页面时，有时会自动滚动到关于图标。无需滚动即可随机发生，只需单击刷新/重新加载按钮即可。
有什么不对劲与应该怎么做（第一个负载是自动滚动到第二个图标的负载，第二个负载是应该如何滚动的负载）
https://gyazo.com/727c9db42d221fb196954595481ff60b
document.body.style.overflow = 'hidden';
//the key strokes for the up and down keys
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
//Secret Code: EADWEARD
if (e.keyCode == '40') {
//this is down
//this will open it up
anime({
targets: 'div.right',
translateX:{
value: 200, duration: 500
}
});
anime({
targets: 'div.left',
translateX:{
value: -200, duration: 500
}
});
anime({
targets: 'div.middle',
opacity: 0,
duration: 2500
});
console.log("down");
}
}
//Scroll detection occurs here, without the scrollbar
$('html').on ('mousewheel', function (e) {
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
//This is for the scrolling down
// animation opens up the brakets
anime({
targets: 'div.right',
translateX:{
value: 200, duration: 500
}
});
anime({
targets: 'div.left',
translateX:{
value: -200, duration: 500
}
});
slot.prev();
const el = document.querySelector('#middle');
const machine = new SlotMachine(el, {
active: 1,
delay: 450,
auto: 1500
});
machine.next();
console.log("down");
} if (delta > 0) {
slot.next();
}
});
// Set up our container
const el = document.querySelector('#theMiddle');
// Create new SlotMachine
const slot = new SlotMachine(el, {});