Solve the problem of page scrolling, 🍖ant design's select box and option separation problem, and understand ant's html design skills.

Through the solution, we also learn ant's html/css design skills.

Phenomenon

When scrolling, the "person in charge" option and the select box have been separated.

The Vue version I used, I looked at the api design of the react version, and I think this special situation will occur in both of them.

reason

When you click select, ant does 2 things:

1. Generate "option list div" at the end of the body.
2. The "option list div" will calculate the current position of the select relative to the body element, and use "absolute" positioning.
   So if we only use the body scroll bar, then the options and the select box will scroll together when scrolling the page, but if we design the scroll bar ourselves, the problem of not using the body will come.

solve

Knowing the cause and solving it is very simple.

Approach 1

Let the parent element of select only have the body with a scroll bar, that is, only use the global scroll bar, and do not add local scrolling for a div.
I changed my project, although it was changed, I felt that the code was not elegant. So I went to the document again.

Approach 2

This method is more flexible. Looking at the document, there is a getPopupContainer api, and the "option div" generated by specifying select is placed in a div with a scroll bar defined by us.

Summarize

Ant puts the option at the end of the body to prevent the parent element of the select from overflow: hidden and occlude the option. At the same time, through getPopupContainer ensure that the div element is generated in the parent element where the scroll bar is located, and the select box and options can be realized without js monitoring scrolling. Scroll to follow (I just encountered a problem, the first reaction was to monitor the scroll, ashamed).