We’ll also learn ant’s HTML/CSS design techniques through the solution.

The phenomenon of

As I scroll, the “responsible” option is separated from the Select box.

I use the VUE version, I looked at the REACT version of the API design, I think both of them will have this special situation.

why

When you click Select, Ant does two things:

  1. Generate “Options list div” at the end of the body.
  2. The “options list div” calculates the current position based on the select relative to the body element and uses” absolute “positioning.

So if we only use the body scroll bar, then the options and the Select box scroll together, but if we design the scroll bar ourselves, the problem is not using the body.

To solve

The solution is simple once you know why.

Method 1

Making the parent of a select element have only the body scrollbar means using the global scrollbar instead of adding local scrollbars to a div. I made some changes to my own project, although the changes were good and the code was not elegant. So I went back to the file.

Method 2

This is a little bit more flexible, but if you look at the documentation, there’s a getPopupContainerapi, which specifies that the “option div” generated by select is placed in our own scrollbar div.

conclusion

Ant puts options at the end of the body to prevent the select parent from overflow:hidden, and uses getPopupContainer to ensure that the div element is generated within the scrollbar parent. Js does not need to listen to scroll can be implemented select box and options scroll follow (I just encountered a problem, the first reaction is to listen to scroll, ashamed).