I am pulling my hair out because for some reason when I pass behavior: smooth as a parameter to window.scroll, the function stops working altogether in Chrome. Without behavior:smooth it scrolls as expected. I'm pretty sure this is a Chrome bug, but I've used behavior:smooth elsewhere without issue, so I'm wondering what's special about the config on this page which is causing the problem. Here's the set-up, which will hopefully allow you to reproduce:
I have a document with several viewport-sized divs like so:
html:
<body>
<div class="slide" data-ind="0"></div>
<div class="slide" data-ind="1"></div>
<div class="slide" data-ind="2"></div>
</body>
css:
.slide{
width:100%;
height:100vh;
border-bottom:1px solid black;
box-sizing:border-box;
}
I'm trying to use an event listener to scroll to a slide when you press an arrow key, like so:
window.addEventListener('keydown',function(){
if(event.key=='ArrowRight'){
let el=document.querySelector('.slide[data-ind="1"]');
let dist=el.offsetTop;
window.scroll({
top:dist,
left:0,
behavior:'smooth'
})
}
})
Update: Some more testing has made it clear that the bug only happens when window.scroll is used within a keyboard event.
I was able to resolve this by adding event.preventDefault(); to the keyboard event. Still unclear if this is intended/standard behavior, as Firefox had no such issue even without adding this line.