Prevent scrolling using CSS on React rendered components

Question

So I render a component via React within my html like so:

 
  
    
${appHtml}
    

        

Answer 1

The above doesn't work for iOS mobile.

body-scroll-lock uses a combination of CSS and JS to make it work for all devices, whilst maintaining scrollability of a target element (eg. modal).

ie. for iOS, need to detect when the bottom or top of a target element is reached, and then stop scrolling completely