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 regular page.

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

The problem:

1. Scroll bar is from div.outer-container, its height is correct when loaded. But, when scroll the height is not correct, due to 1st child div is fixed.

2. Behavior:

2.1) Drag scroll bar to bottom, “Bottom” 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 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, of course.

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 component. I can’t use HTLM default feature to host 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?

    === 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; 
    }