/Javascript/AngularJS/Angular scroll event on div chang width

Angular scroll event on div chang width

<body style="overflow: scroll; height: 1000px;" onload="scrollDetect()">
    <div class="firstdiv" style="border:1px solid black; margin: 0 auto; width: 200px;height: 200px;">
    </div>

    <script>
        function scrollDetect() {
            let div = document.querySelector('.firstdiv')
            var lastScroll = 0;
            window.onscroll = function () {
                let currentScroll = document.documentElement.scrollTop; // Get Current Scroll Value
                if (currentScroll > 0 && lastScroll <= currentScroll) {
                    lastScroll = currentScroll;
                    div.style.width = '50%'
                    div.style.height = "50%";
                    div.style.background = "red";
                    div.style.position = "relative";
                    div.style.top = "0";
                    div.style.left = "0";
                } else {
                    lastScroll = currentScroll;
                    div.style.width = '200px'
                    div.style.height = '200px'
                }
            };
        }
    </script>
</body>

Source: stackoverflow.com

Similar codes

0 vote182 views2 answers
Aos library animation angular
Javascript AngularJS
-1 vote257 views1 answer
An unhandled exception occurred: ENOENT: no such file or directory, lstat 'C:\Users\hp\Desktop\New folder\node_modules' See "C:\Users\hp\AppData\Local\Temp\ng-uhxyh2\angular-errors.log" for further details.
Javascript AngularJS
0 vote136 views1 answer
How to set header in angular 8post
Javascript AngularJS
24 votes204 views2 answers
Date format in angular ts
Javascript AngularJS
6 votes117 views4 answers
Bootstrap not working in angular
Javascript AngularJS
1 vote111 views1 answer
Your global Angular CLI version is greater than your local version
Javascript AngularJS
1 vote116 views2 answers
Angular input value
Javascript AngularJS
2 votes72 views2 answers
Placeholder in angular 9 select with working required
Javascript AngularJS
0 vote114 views1 answer
Animation end event angular
Javascript AngularJS
0 vote143 views2 answers
Angular 4 "Property does not exist on type component"
Javascript AngularJS