Changing height of border-right according to scrollPosition-CodePudding

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!

CodePudding user response：

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`
  }
})

CodePudding user response：

Thank you guys for the super quick help!

I tried it and it's exactly what I was desperately searching for. I am not used to all the necessary vocabulary yet and the issue was the ".style.height" and I didn't thin about ElementById.

Thanks again!

CodePudding user response：

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>