Question

我使用两个功能来移动背景位置并缩放div的背景。他们在这里：

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

            });
        }
    };

})();

问题是我需要它们同时运行但它们只是单独运行。如果他们都是这样写的 - 第二个只运行而第一个什么都不做。如果我删除第二个，第一个开始工作。我最近在JS中有点生疏，所以我无法弄明白。有没有办法让它们都起作用？

Answer 1

您覆盖window.onscroll事件

试试这两行：

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

使用以下代码......

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

Answer 2

您已经两次分配到window.onscroll。这意味着第二个处理程序＆＃34;取消注册＆＃34;第一个。

您可以使用addEventListener在两个功能中收听事件：

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

JS函数分开工作但不能一起工作

2 个答案: