Changing height of border-right according to scrollPosition

Question

Sorry if this is a dumb question, I am super new to programming in html and Javascript.

I know, that I can change some transformation with the scrollpositon, but right now I'm a bit lost. I want to increase the height of a box, when the user scrolls down.

It starts with

"height: 60px;"

and then I'd like it to grow like "height ="60 + scrollY * a very small number + px".

Is there any way to achieve this?

Kind regards and greetings!

What have you tried so far, utilizing the event `scroll` and the property `scrollTop`? — IT goldman, Jun 24 '22 at 16:08
Hi Yannis. Welcome to Stack Overflow. This question has been asked before: e.g. [here](https://stackoverflow.com/q/36017742/438273), and a more in-depth discussion [here](https://stackoverflow.com/q/41740082/438273). You can probably find even more by searching through existing questions. — jsejcksn, Jun 24 '22 at 17:01

Sean V · Answer 1 · 2022-06-24T16:16:20.187

0

let height = 60;//default height

document.addEventListener("mousewheel", function(event){

  if(event.wheelDelta >= 0){
     height--
    element.style.height = `${height}px`
  }else{
    height++
    element.style.height = `${height}px`
  }
})

edited Jun 24 '22 at 16:16

answered Jun 24 '22 at 16:15

Sean V

1
1

score -1 · Accepted Answer · answered Jun 24 '22 at 16:30

You can use the scroll_event to enlarge the box when a user scrolls.

Here is an example of how to change the box height on scroll using dynamic calculation.

<html lang="en">
<head>
    <title>Scroll large demo</title>
    <style>
        body {
            min-height: 1000px;
            background: aliceblue;
        }

        #box {
            height: 60px;
            background: red;
            color: white;
            vertical-align: middle;
            text-align: center;
            position: fixed;
            margin: 0 auto;
            padding: 15px;
        }
    </style>
</head>
<body>
<div id="box">
    I am going to enlarge when you scroll
</div>
<script>
    let lastKnownScrollPosition = 0;
    let ticking = false;

    function doSomething(scrollPos) {
        document.getElementById("box").style.height = 60 + (scrollPos * 0.25) + "px";
    }

    document.addEventListener('scroll', function (e) {
        lastKnownScrollPosition = window.scrollY;
        doSomething(lastKnownScrollPosition);
        if (!ticking) {
            window.requestAnimationFrame(function () {
                doSomething(lastKnownScrollPosition);
                ticking = false;
            });
            ticking = true;
        }
    });
</script>
</body>
</html>

Changing height of border-right according to scrollPosition

2 Answers2