Skip to content

Position fixed element inside scrollbar. #362

Answered by idiotWu
igorpreston asked this question in FAQ
Discussion options

You must be logged in to vote

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/tuqafo…

Replies: 7 comments 3 replies

Comment options

You must be logged in to vote
2 replies
@stepanjakl
Comment options

@bradleyhodges
Comment options

Answer selected by idiotWu
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
1 reply
@bradleyhodges
Comment options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
FAQ
Labels
FAQ Frequently Asked Questions
8 participants
Converted from issue

This discussion was converted from issue #49 on June 10, 2021 17:08.