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
    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

[igorpreston]

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

[Jero786]

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