javascripthtmlcssreactjspopper.js

How prevent change popper placement with scroll?

I want to fix the popper element's position and not change the placement with later updates (without disabling the scroll listener).

The gif shows you my sticky popper, but I want it to be static. (don't change position on scroll):

enter image description here

Solution

  • Popper uses some modifiers that are not customizable! Instead, I use a new library whose name is Floating UI (the evolution of Popper 2).

    Floating UI extended modifiers to something new as middleware. One of them whose name is shift can be or not be in the middleware list to handle shifting popper elements in the exiting from viewport situation.

    You can find further information at Floating UI doc.

    shift() moves the floating element along the specified axes in order to keep it in view.