How to stop a scrollable element from being scrolled any further?

Question

I have this scrollable text where the user is able to scroll so that my name is shown. I want to stop the text from being scrolled any further when the element reaches the middle of the user's screen. Is there any way to do that? Attached below is a snippet of the code.

        let text = document.getElementById('text');
        var textRect = text.getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        var w = window.innerWidth;
        const scaler = 1/25
        window.addEventListener('scroll', function(){
            let value = window.scrollY;

            if (value < w/2.65) /*when text is right of center*/{
                text.style.marginRight = value * 3*scaler+ 'vw';
            }


        })

I have made many futile attempts at solving this issue but all have gone in vain. Thank you to anyone that helps me solve this issue.

I have tried using innerwidth to compare my value to the width of the screen and used document.body.getBoundingClientRect() but none of those have worked either