【CSS】Fixed input box compatibility issue on ios

need:

To achieve a simple requirement, the top is the search box and the top is fixed, and the bottom is the scrolling content list
insert image description here

question :

If you use fixed positioning at the top and scroll-view at the bottom as shown in the figure, there is no problem on Android, but it is found that there will be compatibility problems on ios:

Question 1: When the content list is scrolled to the middle and then searched, the displayed search content will be pushed to the top instead of below the search box, and there is no response when clicking the search box again

Reason: Because the content list has been scrolled to the middle at this time, and after the search is completed, the position of the content list is calculated from the original scroll position, so the searched content is not displayed under the search box

Question 2: When the content list scrolls to the bottom and then search, the page appears blank (actually there is data returned), and clicking the search box and other elements again does not respond

The reason is unknown~

solution :

Use js to calculate the middle height contentHeight = pageHeight - searchHeight
sroll content to scroll-y: auto

perfect solution~
insert image description here

Guess you like

Origin blog.csdn.net/qq_45481971/article/details/132047692