Adjusting the border-right size based on scroll position

Question

Adjusting the border-right size based on scroll position

Apologies if this question seems trivial, but I am completely new to coding in HTML and JavaScript.

I understand that I can make some changes based on scroll position, but right now I'm a little confused. I want to increase the height of a box as the user scrolls down.

It currently starts with

"height: 60px;"

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

Is there a way to accomplish this?

Many thanks and best regards!

javascript html css

Answer 1

Answer №1

let initialHeight = 60;//default height

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

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

Answer 2

let initialHeight = 60;//default height

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

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

Answer 3

Answer №2

If you want to achieve a cool effect of enlarging a box when a user scrolls, you can utilize the scroll_event method.

Check out this example that demonstrates how to dynamically calculate and change the height of a box as the user scrolls:

<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>

Answer 4

If you want to achieve a cool effect of enlarging a box when a user scrolls, you can utilize the scroll_event method.

Check out this example that demonstrates how to dynamically calculate and change the height of a box as the user scrolls:

<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>

Adjusting the border-right size based on scroll position

Answer №1

Answer №2

Similar questions

Is it possible to save round items within a session?

"Implementing Vue mousemove functionality only when the mouse button is pressed

Implement a jQuery loading animation triggered by scrolling down the page

behind the scenes of a disappearing bootstrap modal

After a postback in JavaScript, the Root Path variable becomes null

What is the best way to embed sections of one HTML page into another page?

Buefy table in Vue with various row statuses

react component not displaying image

Exploring the functionalities of the useState object with mapping techniques

Ways to navigate to a different page using HTML response from an AJAX request

Challenges arising from the use of 'position: absolute' in managing relationships between grandparents, parents, and children

Steps to have index.html display when running the build command in a Svelte project:

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

Make a <div> element that has a fixed size, but allows for scrolling text inside

Integrating Braintree with Angular for accepting Android Pay transactions

How to Load JavaScript Files into Joomla 2.5 default.php File

Achieve full height without scrolling in React

Finding and removing a specific CSS pattern from a webpage that has been loaded

Tips for filling in the values for the options in a select dropdown menu