How to add a class so that the dropdown opens up\right\left if there is no space?

Question

css

Hello! How is it implemented? Let's say there is a dropdown that opens down, if you scroll the page to it, it will open up (for example, the up class will be added).

Answer 1

You need to get the menu and scroll coordinates, get the dimensions of the dropdown menu, and check if it fits where you want it to.
https://learn.javascript.ru/metrics
https://learn.javascript.ru/metrics-window
https://learn.javascript.ru/coordinates
https://learn.javascript.ru/coordinates-document

Answer 2

Before opening, you read all the coordinates (height/width of the dialog, position from the top/left of the page, page height, etc.), compare, add classes, and only then open the dialog.