Broken scroll functions when trying to adjust content while scrolling

I am trying to create a page with L-shaped grids. I got the layout down by creating 2 x 2 grids and each grid uses a 0 width div as a spacer to push another floated div to void out the space where I don’t want text to appear. I am having a problem now trying to be able to scroll the text and adjust the position of the floated void div by adjusting the height of the spacer div.

$(document).ready(function () {
    $('#tr').on('scroll', function (e) {
        // Some extra values for troubleshooting
        let sH = $('#tr').prop('scrollHeight');
        let sT = $('#tr').prop('scrollTop');

        let poH = $('#tr').outerHeight();
        let poHt = $('#tr').outerHeight(true);
        let ph = $('#tr').height();

        let soH = $('#trs').outerHeight();
        let soHt = $('#trs').outerHeight(true);
        let sh = $('#trs').height();

        let voH = $('#trv').outerHeight();
        let voHt = $('#trv').outerHeight(true);
        let vh = $('#trv').height();
        let vo = $('#trv').offset().top;
        // console.log(`sH: ${sH}, \nsT: ${sT}, \npoH: ${poH}, \nph: ${ph}, \nsoH: ${soH}, \nsh: ${sh}, \nvoH: ${voH}, \nvh: ${vh}, \nvo: ${vo} `);


        /*
        Method #1 - Trying to change the vertical spacer height to increment with same value as scroll distance.
        Problem - Once scroll starts, it does not stop until it reaches the end.  Once it reaches the end it also
        seems to be  stuck in a loop...I think this it because  the parent heigh changes as content adjusts...
        But I'll worry about that after I figure out how to get the scrolling to stop.
        */

        let x = ph / 2 + sT;
        // console.log(`x: ${x}`);
        $('#trs').height(x);


        /*
        Method 2 - Keep incrementing the spacer height of the spacer until the height of the void div is in the desired position.
        Problem - It too gets stuck scrolling all the way to the bottom once the scroll is started.  It also seems to hang that
        once the scroll is started, the console doesn't spit out all the content for several seconds, and I can refresh the page
        for a while.  I tried putting in some counter and breaking the loop if it runs too long, but that does not seem to help.
        */

        // let c = 0;
        // let margin = 16;
        // let y = ph / 2 + margin;
        // // console.log(`y: ${y}`);
        // while (vo < y) {
        //     $('#trs').height($('#trs').height() + 1);
        //     vo = $('#trv').offset().top;
        //     c++;
        // //     console.log(`+vo: ${vo}, c: ${c}`);
        //     if (c === 100) {
        // //         console.log("!-"); break;
        //     }
        // }

        // let z = ph / 2 + margin;
        // // console.log(`z: ${z}`);
        // while (vo > z) {
        //     $('#trs').height($('#trs').height() - 1);
        //     vo = $('#trv').offset().top;
        //     c++;
        // //     console.log(`-vo: ${vo}, c: ${c}`);
        //     if (c === 100) {
        // //         console.log("!-"); break;
        //     }
        // }              


    })
});
* {
    color: #FFF;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10pt;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    height: calc(100vh - 8px);
    margin: -4px;
}


#tl {
    grid-area: 1 / 1 / 3 / 3;
    background-color: red;
    margin: -4px;
}

#tr {
    grid-area: 1 / 3 / 3 / 5;
    background-color: purple;
    margin: -4px;
    overflow-y: scroll;
}

#bl {
    grid-area: 3 / 1 / 5 / 3;
    background-color: orange;
    margin: -4px;
}

#br {
    grid-area: 3 / 3 / 5 / 5;
    background-color: green;
    margin: -4px;
}

#c {
    grid-area: 2 / 2 / 4 / 4;
    background-color: blue;
    overflow-y: scroll;
    /* display: none; */
}


.grid-container * {
    border: 8px solid white;
    padding: 8px;
    overflow: hidden;
    position: relative;
}

.vert-space-top {
    width: 0px;
    height: 50%;
    padding: 0px;
    border: none;
}

.vert-space-bottom {
    width: 0px;
    height: 0%;
    padding: 0px;
    border: none;
}

.void {
    width: 50%;
    height: 50%;
    padding: 0px 4px 0px 4px;
    border: none;
}

.right {
    clear: left;
    float: left;
}

.left {
    clear: right;
    float: right;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS L-Shaped Grid With Wrap-Around</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="grid-container">
        <div id="tl">
            <div class="vert-space-top left"></div>
            <div class="void left"></div>
            CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS
            p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid.<br>
            CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS
            p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid.<br>
            CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS
            p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid.<br>
            CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS
            p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid.<br>
            CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS
            p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped
            grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid. CSS p-shaped grid.<br>
        </div>
        <div id="tr">
            <div id="trs" class="vert-space-top right"></div>
            <div id="trv" class="void right"></div>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
            CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS
            q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped
            grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid. CSS q-shaped grid.<br>
        </div>
        <div id="bl">
            <div id="bls" class="vert-space-bottom left"></div>
            <div class="void left"></div>
            CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS
            b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid.<br>
            CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS
            b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid.<br>
            CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS
            b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid.<br>
            CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS
            b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid.<br>
            CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS
            b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped
            grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid. CSS b-shaped grid.<br>
        </div>
        <div id="br">
            <div id="brs" class="vert-space-bottom right"></div>
            <div class="void right"></div>
            CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS
            d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid.<br>
            CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS
            d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid.<br>
            CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS
            d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid.<br>
            CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS
            d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid.<br>
            CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS
            d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped
            grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid. CSS d-shaped grid.<br>
        </div>
        <div id="c">
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
            CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS
            o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped
            grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid. CSS o-shaped grid.<br>
        </div>
    </div>
</body>

</html>

Trying to add scrolling staring with the top right box (because the ones on the left are going to require some extra magic to get the scroll bars on the left hand side), I have 2 methods in the code I am trying to get to work – you have comment out the one & uncomment to other to get the other to run. But the problems I am having with either method are:

Method #1 – Trying to change the vertical spacer height to increment with same value as scroll distance.
Problem – Once scroll starts, it does not stop until it reaches the end. Once it reaches the end it also seems to be stuck in a loop…I think this it because the parent height changes as content adjusts… But I’ll worry about that after I figure out how to get the scrolling to stop.

(Actually, when running the code in the snippet I added here, method 1 seems to be working as desired when using the mouse wheel to scroll, but still not when trying to click/drag the scrollbar. And neither work as it’s own stand alone page)

Method 2 – Keep incrementing the spacer height of the spacer until the height of the void div is in the desired position.
Problem – It too gets stuck scrolling all the way to the bottom once the scroll is started. It also seems to hang that once the scroll is started, the console doesn’t spit out all the content for several seconds, and I can refresh the page for a while. I tried putting in some counter and breaking the loop if it runs too long, but that does not seem to help.

Can I get any help getting a working function?

61 thoughts on “Broken scroll functions when trying to adjust content while scrolling”

  1. Pingback: male gay dating
  2. Pingback: gay dating com
  3. That is very fascinating, You’re an excessively professional blogger.
    I have joined your feed and look forward to seeking more of your
    great post. Also, I have shared your site in my social networks

    Reply
  4. Yesterday, while I was at work, my sister stole my iphone and tested to see if it can survive
    a 40 foot drop, just so she can be a youtube sensation.
    My iPad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it
    with someone!

    Reply
  5. Can I simply just say what a relief to discover a person that truly knows what they’re discussing on the internet.
    You definitely know how to bring a problem to light and make it
    important. More people need to read this and understand
    this side of the story. It’s surprising you are not more popular since you certainly possess the gift.

    Reply
  6. 228604 69634Aw, this became an really nice post. In thought I would like to devote writing such as this moreover – taking time and actual effort to make a extremely very good article but exactly what do I say I procrastinate alot and by no indicates discover a strategy to get something completed. 748444

    Reply
  7. Hi there! This is kind of off topic but I need some guidance from an established blog.
    Is it difficult to set up your own blog? I’m not very techincal
    but I can figure things out pretty quick.
    I’m thinking about making my own but I’m not sure where to start.
    Do you have any points or suggestions? Cheers

    Reply
  8. Pretty nice post. I just stumbled upon your blog
    and wished to say that I’ve truly enjoyed browsing your blog
    posts. In any case I will be subscribing for your rss feed and I’m hoping you write once more soon!

    Reply
  9. I think this is among the most significant info for
    me. And i’m glad reading your article. But wanna remark on some general things, The web site
    style is great, the articles is really great : D.
    Good job, cheers

    Reply
  10. We’re a group of volunteers and starting
    a brand new scheme in our community. Your site offered us with helpful information to work on. You have
    performed an impressive activity and our whole group can be grateful to you.

    Reply
  11. When someone writes an piece of writing he/she retains the plan of a user in his/her mind that
    how a user can know it. So that’s why this
    piece of writing is great. Thanks!

    Reply
  12. An intriguing discussion is worth comment. I believe that you
    ought to publish more about this subject, it may not be a taboo subject but usually folks don’t speak
    about such topics. To the next! Many thanks!!

    Reply

Leave a Comment