Search code examples
htmlcssreactjsscroll

React + CSS: Scrollable section inside another scrollable section getting me issues to get the footer in Mobile


Hope you can help me out here.

The thing is that I have a section, where I map components. This section has a vertical scroll. Outside this section, there's another components, like a map , navbar, footer, etc. When I'm in mobile, I can scroll through all the components mapped, but when I got to the end of the section, I can't get to the footer or the pagination component.

To test this issue, you can enter this site and try to scroll down all over and get to the pagination component in a mobile.

Sorry if I didn't explained it well, It's an annoying issue and I don't know how to solve it.


Solution

  • This is caused by the inline style here:

    <div class="col-lg-7 col-sm-12" style="height: 860px; overflow-y: scroll;">
    

    Try removing the inline style and adding a class that you can apply the required styling to in a media query to target desktop.

    So it could look something like (you can name the class to something more appropriate)

    <div class="col-lg-7 col-sm-12 scroll-fix">
    

    css

        /* Reset for desktop */
        @media only screen and (min-width: 992px) {
          .scroll-fix {
             height: 860px; 
             overflow-y: scroll;
          }
         }