Scrolling using javascript methods

Question

HTML

<section id="imag" class = "paral-1 image-contain">         
</section>

JAVAScript

var g = 0;
    //var myImage = document.getElementById("imag");
    window.addEventListener('scroll', pageScrolled);

    function pageScrolled() {
        g = g + 10;
        document.getElementById("imag").style.top = -g+"px" ;
    }

First, the function should be called on scrolling but when page loads it is called.
Second, When I scroll the function should update the variable "g" with 10 but it is increased by like 100. What is this weird beahviour. You can open console and check. Here's the fiddle - https://jsfiddle.net/LuLt0mh0/

t.niese · Accepted Answer · 2016-05-12 07:54:33Z

1

this will only happen if the document is scrolled on load (e.g. because of an anchor, or on a reload if the page was already scrolled)
For each emmited scroll event g is increased by 10. But it is a continues event that is fired multiple times while scrolling.

Adding a console.log(g) to the pageScrolled will show you that it is increased by 10 multiple times: jsfiddle.net/LuLt0mh0/1

See MDN scroll for more details:

[...]Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.[...]

edited May 12, 2016 at 7:54

answered May 12, 2016 at 7:46

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shah Rukh K Over a year ago

Can we control this scroll behavior because if i have to apply any function on scroll, it could be a disaster.. Iam trying to add parallax scroll

t.niese Over a year ago

@ShahRukhK You should never increase the values step-wise by a fixed value for each event that is fired, for classical paralax you tie your values to the scroll-offset, using something like the Scroll optimization with window.requestAnimationFrame shown on the MDN page. Or depening on the effect you want to have start a smooth animation if a certain scroll offset is reached. But as you don't mention what effect you want to achieve it is not possible to tell.

zer00ne · Accepted Answer · 2016-05-12 08:04:59Z

0

You have 2 problems with the following line:

  document.getElementById("imag").style.top = -g + "px";

Every time the scroll event happens, that line executes--the result being #imag top decreases by x10px. Of course the reason why nothing happens is because...
#imag has no position property assigned to it. In order for the property top to work is if the element has position: relative, absolute, or fixed. But even if you did have this corrected, that line of code will drive your #imag off of your viewport never to be seen again and will continue going north until you refresh the page.

answered May 12, 2016 at 8:04

zer00ne

45.3k6 gold badges50 silver badges82 bronze badges

Collectives™ on Stack Overflow

Scrolling using javascript methods

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related