Position fixed element inside scrollbar.

[igorpreston]

Hello,
Is there a way to make div element inside scrollbar container to stick always to top during scrolling?

Setting position: fixed, top: 0, left: 0, right: 0 didn't work.

[idiotWu]

Since transform creates a new local coordinate system(W3C Spec), position: fixed is fixed to the origin of scrollbar content container, i.e. the left: 0, top: 0 point.

So it's recommended to put your fixed element outside the scrollbar contents, or you may need to register a scroll listener and apply offsets to the fixed element.

FYI:

const scrollbar = Scrollbar.init(elem, {
    // execute listeners synchronously to make sure they can be rendered at same tick
    // this is only needed in v7.x
    syncCallbacks: true,
});

scrollbar.addListener(({ offset }) => {  
  fixed.style.top = offset.y + 'px';
  fixed.style.left = offset.x + 'px';
});

A working demo is here: http://jsbin.com/tuqafof/edit

---

06/04/2022 Edit
A full-function demo using translate3d: https://codesandbox.io/s/smooth-scrollbar-fixed-element-ki0syo?file=/src/fixed-element.ts

[stepanjakl]

This is a great, however I had a small visual lag for some reason. So using translate3d() worked better.

fixed.style.transform = `translate3d(${ offset.x }px, ${ offset.y }px, 0px)

[igorpreston]

@idiotWu great, thank you very much, works perfectly!

[Jero786]

@idiotWu thank you so much! you save me a lot of hours!!! :D

[jbrizard]

Perfect hack ! Thanks a lot!!

[leosin]

If your SS is placed in #demo, you can add the following style to the #demo

#demo{
overflow: auto; height: 100vh;
}
.your_fixed{
position:fixed;
}

[xalteropsx]

thnx idom