Question

var parallax = document.querySelectorAll(".slider-parallax"),
    speed = 0.5;

    window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
        var windowYOffset = "-" + window.pageYOffset,
        elBackgrounPos = (windowYOffset * speed) + "px 0 0 0";
        el.style.margin = elBackgrounPos;
        });
    };

预期的行为是浏览器将margin: -0px 0 0 0呈现为inline-css。但每次都错过了最后一个值。

如果您将上述值更改为px 0，那么它适用于顶部和底部，它可以正常工作。

https://jsfiddle.net/vqdh4k0z/

理想情况下，我只想对margin-top应用负值。有没有更简单的方法呢？

Answer 1

实际上，您的代码有效，您在内联css中看不到4个值的原因是写margin: 10px 0 0 0等同于margin: 10px 0 0，这只是浏览器优化您的CSS

如果您只想编写margin-top属性，请执行以下操作：

window.onscroll = function(){
        [].slice.call(parallax).forEach(function(el,i){
            var windowYOffset = "-" + window.pageYOffset;
            var elBackgrounPos = (windowYOffset * speed) + "px";
            el.style.marginTop = elBackgrounPos;
        });
    };

如果您需要知道属性的名称，只需查看MDN reference page，在JavaScript中，名称通常会转换为camelCase，例如margin-top到marginTop。

为什么这个JS省略了第四个保证金属性？

1 个答案: