1<body style="overflow: scroll; height: 1000px;" onload="scrollDetect()">
2 <div class="firstdiv" style="border:1px solid black; margin: 0 auto; width: 200px;height: 200px;">
3 </div>
4
5 <script>
6 function scrollDetect() {
7 let div = document.querySelector('.firstdiv')
8 var lastScroll = 0;
9 window.onscroll = function () {
10 let currentScroll = document.documentElement.scrollTop; // Get Current Scroll Value
11 if (currentScroll > 0 && lastScroll <= currentScroll) {
12 lastScroll = currentScroll;
13 div.style.width = '50%'
14 div.style.height = "50%";
15 div.style.background = "red";
16 div.style.position = "relative";
17 div.style.top = "0";
18 div.style.left = "0";
19 } else {
20 lastScroll = currentScroll;
21 div.style.width = '200px'
22 div.style.height = '200px'
23 }
24 };
25 }
26 </script>
27</body>
28