Tabs without scrolling to the anchor

[Niels Roozemond]

In your tabs example I've tried to make it suitable for an element in a larger body, not something absolutely position in a body without overflow. So I had to disable scrolling to the anchor and I would like to know if this is a "good idea"?

tabnav.addEventListener('click', e => {
    if (e.target.nodeName !== "A") return
    e.preventDefault()

    history.pushState({}, '', e.target.href)
    setActiveTab(e.target)
    tabsection.scrollLeft = document
            .querySelector(e.target.attributes.href.value)
            .offsetLeft 
})

Also had to remove the scrollToView() line and I had to round this number:

const i = Math.round( tabsection.scrollLeft / tabsection.clientWidth )

[Adam Argyle]

rounding the number

while it may be disconcerting, it probably works fine right? if it tests well, i wouldn't worry about it 👍🏻 just dont guess it, test it =)

tabsection.scrollLeft = target.href.value.offsetLeft

generally requests for offsetLeft should be minimal, so you may see lag on low end devices when something is clicked.

without your demo i'm having a kinda hard time imagining the constraints and goals you're working within. hopefully this is helpful so far!?

[Niels Roozemond]

No this is great! It no longer jumps to the anchor and all the other fun stuff like the focus on the tab when you scroll still works. I'm not bothered with the lag, I opted for the reduced motion way by default. Thanks and looking forward to the next gui challenge!