JS Functions Work Separately But Not Together

Question

I'm using two functions to shift the background position and to zoom div's background. Here they are:

(function(shifting) {

    var parallax = document.querySelectorAll(".shiftparallax"),
        speed = -0.05;

    window.onscroll = function() {
        [].slice.call(parallax).forEach(function(el, i) {

            var windowXOffset = window.pageYOffset,
                elBackgrounPos = (windowXOffset * speed) + "px";
            console.log(elBackgrounPos);
            el.style.backgroundPositionY = elBackgrounPos;

        });
    };

})();


(function(zooming) {
    var parallaxfacts = document.querySelectorAll(".parallaxfacts"),
        constantsize = 100;
    speed = -0.03;
    window.onscroll = function() {

        if (window.innerWidth > 1024) {
            [].slice.call(parallaxfacts).forEach(function(el, i) {

                var windowXOffset = window.pageYOffset,
                    elBackgrounScale = (windowXOffset / 950 * constantsize) + "%";

                el.style.backgroundSize = elBackgrounScale;

            });
        }
    };

})();

The problem is that I need them both to run at the same time but they only run separately. If they are both written like that - the second one runs only and the first one does nothing. If I remove the second one, the first one starts working. I've got a bit rusty in JS lately so I can't figure it out. is there any way to make them both work?

Please show how you're calling the functions and under what conditions. — Difster, Jul 08 '17 at 05:21

score 1 · Answer 1 · answered Jul 08 '17 at 05:23

1

You overwrite the window.onscroll event

try this two lines:

window.onscroll = el => console.log ('first');
window.onscroll = el => console.log ('second');

use the following code...

window.addEventListener('scroll',  el => console.log ('firstlistener'));
window.addEventListener('scroll',  el => console.log ('secondlistener'));

answered Jul 08 '17 at 05:23

Frank Wisniewski

1,182
8
7

Don’t use `el` here. It’s used as a variable in an inner function. – Sebastian Simon Jul 08 '17 at 05:29
yes you can also write: `window.addEventListener('scroll', () => console.log ('secondlistener'));` – Frank Wisniewski Jul 08 '17 at 05:32

score 1 · Accepted Answer · answered Jul 08 '17 at 05:24

1

You're assigning to window.onscroll twice. That means the second handler "unregisters" the first.

You can use addEventListener to listen to the event in both functions:

window.addEventListener("scroll", function() { /* function 1*/ });
window.addEventListener("scroll", function() { /* function 2*/ });

answered Jul 08 '17 at 05:24

joews

29,767
10
79
91

That did the thing. I had no idea they cancel each other. Thank you! – Nebular Dust Jul 08 '17 at 05:28
It's like any other property; if you `a = {}; a.x = 1; a.x = 2;`, `x` is `2` at the end because properties can only have one value. – joews Jul 08 '17 at 06:06

JS Functions Work Separately But Not Together

2 Answers2