在 Microsoft Edge 中,在任何网页上按住向下箭头键可以以令人难以置信的快速度向下滚动页面。虽然 Edge 是基于 Chromium 的,但 Google Chrome 不受此影响。
这是一个使用 Lorem Ipsum250 段的示例。
在 Chrome 中,每秒向下滚动几个段落。在 Edge 中,每秒向下滚动数十个段落。
我们如何在 Edge 中控制网站的滚动速率?有没有办法用 JS 做到这一点?
向上/向下箭头键在我们的 Edge 网站上带来了糟糕的用户体验。
边缘:
铬:
JavaScript 的初始解决方案(是的,我知道,它需要检测用户是否在输入框内等 - 我计划明天改进)
if(window.navigator.userAgent.indexOf('Edg') > -1) {
document.onkeydown = slowScroll;
window.lastScrolledUp = 0;
window.lastScrolledDown = 0;
window.lastScrolledLeft = 0;
window.lastScrolledRight = 0;
}
function slowScroll(e) {
var now = Date.now(),
minDelay = 100;
switch(e.keyCode) {
// Up
case 38:
if(now - window.lastScrolledUp < minDelay) {
e.preventDefault();
return;
}
window.lastScrolledUp = now;
break;
// Down
case 40:
if(now - window.lastScrolledDown < minDelay) {
e.preventDefault();
return;
}
window.lastScrolledDown = now;
break;
// Left
case 37:
if(now - window.lastScrolledLeft < minDelay) {
e.preventDefault();
return;
}
window.lastScrolledLeft = now;
break;
// Right
case 39:
if(now - window.lastScrolledRight < minDelay) {
e.preventDefault();
return;
}
window.lastScrolledRight = now;
break;
}
}
上面的代码成功减慢了 Edge 中快得离谱的滚动速度。