There are 2 divs. 1st div is full page and is ‘fixed’, not scrollable. I want to make 2nd div to be scrollable, just like there is 1 div that takes whole viewport.

The y scroll bar shows up and you can scroll, but it does not work 100%.

The problem:

1. Y Scroll bar is from div.outer-container, its height is correct when loaded as it’s based on 2 div children height. But, when scrolling begins, the height will not be correct, due to 1st child div is fixed.

2. Behavior:

2.1) Drag scroll bar to bottom, “Bottom” test does not show up, as the scroll bar height is not short enough to show it.

2.2) If using mouse scroll wheel, it will scroll to bottom, just like screenshot above. The y scroll bar shows that you already scrolled to bottom. But, if you click the 2nd div, and continue to use wheel to scroll, you are able to see bottom of the 2nd div “Bottom”.

3. I think the scroll bar height for 2nd div is not correct, due to 1 child is ‘fixed’ and not scrollable.

What I want to achieve:

1. Scroll 2nd div like there is just 1 div. Treat 1st div as background.
2. I need 1st div which will contain more complex components. There is not such assumption that 1st div is just a background image.
3. I think css scroll bar will not work, and it has to use JS to dynamically to handle this.
4. 2nd div could contain any component in future.

How to make the y scroll to work perfectly in above configuration?

    === TwoDiv.jsx ===

    import React from 'react';
    import './TwoDiv.css';

    const TwoDiv = () => {
      return (
        <div className="outer-container">
          <div className="background-section">
            <h1>Full Screen Background</h1>
          </div>
          <div className="content-section">
            <h1>Top</h1>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <p>Row</p>
            <h1>Bottom</h1>
          </div>
        </div>
      );
    };

    export default TwoDiv;

    === TwoDiv.css ===

    .outer-container {
      position: relative;
      width: 100%;
      height: 200vh;
      overflow-y: auto; /* Enable vertical scrolling */
    }

    .background-section {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh; 
      background-color: lightblue; 
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
    }

    .content-section {
      position: relative;
      width: 100%;
      z-index: 2;
      margin-top: 100vh;
      background-color: white; 
    }