Question

这是我用于视差滚动的代码。基本上，它非常流畅，并且在Chrome和Firefox中具有预期效果，但在IE中非常不稳定。这是IE的常见问题，还是我的代码可以更好？

HTML

<div id="parallaxLayer1">
        <div class="layer1">

        </div>


</div>
<div id="parallaxLayer2" align="center">
        <div class="layer2"></div>
</div>
<div id="parallaxLayer3"></div>

的Javascript

<script>
    $(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallaxLayer1').css('top',(0-(scrolled*.5))+'px');
$('#parallaxLayer2').css('top',(0-(scrolled*.5))+'px');
$('#parallaxLayer3').css('top',(0-(scrolled*.75))+'px');
}
</script>

CSS

#parallaxLayer1 {
z-index:1;
position:fixed;
width:100%;
}

#parallaxLayer2 {
z-index:2;
position:fixed;
width:100%;
}

#parallaxLayer3 {
z-index:3;
position:fixed;
width:100%;
}

Answer 1

这是我在win8上使用固定元素修复IE11中的生涩问题。默认情况下它会平滑滚动。

如果这对您有用，请告诉我。

if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();
        var wd = event.wheelDelta;
        var csp = window.pageYOffset;
        window.scrollTo(0, csp - wd);
    });
}

视差滚动动画在IE浏览器中黯然失色，在Chrome和Firefox中流畅。我的代码或IE问题？

1 个答案: