Element scrollIntoView while accommodating for the height of a fixed header about smoothscroll

[ctf0]

here is a solution

let item = // what we want to scroll to
let wrapper = // the wrapper we will scroll inside
let count = item.offsetTop - wrapper.scrollTop - xx // xx = any extra distance from top ex. 60
wrapper.scrollBy({top: count, left: 0, behavior: 'smooth'})

[adamthedorsey]

This is an old thread but I just came across it while working out my own solution. Using scroll() instead of scrollBy() seems to make a lot more sense to me.

I simply did...

var offset = 50; // sticky nav height
var el = document.querySelector('.some-element'); // element you are scrolling to
window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });

[13lackNinja]

In case anyone's still searching, I got around this issue with a fixed position header by setting the { block: 'end' } option for my element in element.scrollIntoView(options).

This conveniently lines it up based on the bottom of the element rather than the top, and you can take care of the height of the element yourself by simply subtracting the height of your header or other fixed element.

[naumantahir1]

That helped in my case —


HTML

<div class='stick-to-top'></>

Javascript

document.getElementsByClassName('stick-to-top')[0].scrollIntoView({behavior: "smooth", block: "center"});

CSS

.stick-to-top {
 padding-bottom: 400px;
}

[joshuatuscan]

I'd also love this, or some way of having a callback when animation is finished to be able to re-adjust the element.

[jeremenichelli]

If there are some element floating that will imply the scrolling need to be readjust you need to manually get the y position of the elements and use window.scroll with the resulting metrics gathered.

[themaxsandelin]

On @joshuatuscan comment, I would absolutely love a callback for when the scroll movement is completely done. 👌🏻

[jeremenichelli]

People, remember this is a polyfill and not a library. Unless a callback is added to the spec is not likely to make it in the code.

The best option is to listen to the scroll event and check for the final y position to execute some call and later remove the listener until a new smooth scroll ocurrence.

[themaxsandelin]

It's a good suggestion but does not apply to any sort of website with fixed height content as this would break when tested on larger devices with smaller scrolling distance.

[oscarhandsome]

somebody know how to do? or need use offset and animation to move from top?

[jeremenichelli]

Closing since the feature requested is not included in the official specs. If you find a use case that works on native implementations and not with the polyfill feel free to report it. Thanks!