I have a react app. Within the app there is a sticky navigation and for mobile view when user scrolls down the page and we hit the section that corresponds with the nav item I use scrollIntoView to scroll that active nav link into view (when there are a lot of links, of course they can't all fit on the screen so some maybe cutoff).
<div class="nav">
<a href="#link1" class="link active-link-1"> Link1</a>
<a href="#link2" class="link"> Link2</a>
<a href="#link3" class="link"> Link3</a>
<a href="#link3" class="link"> Link4</a>
<a href="#link3" class="link"> Link5</a>
</div>
.nav {
white-space:nowrap;
width:335px;
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
}
const activeLink = document.querySelector(`.active-link-${activeLinkNumber}`)
activeLink.scrollIntoView({behavior: 'smooth'})
This code works fine in firefox, but not in chrome. When I remove the behavior: 'smooth' then it seems to work fine in chrome, but I need the smooth behavior. Is there an alternative to doing this in Chrome?