Question

我有一个网站顶部是图像滑块（光滑）的网站，它是100％宽度和100％高度的框架。我还有一个＆＃34;向下滚动＆＃34; -button，它使用jQuery将页面向下滚动一帧。

这个动画非常迟钝，我想知道这个动画是否有可能受到光滑动画的影响。

所以我有这个jQuery代码：

if(!$('#isMobile').is(":visible")) {
    $('#slideshow-wrapper').slick({
        infinite: true,
        fade: true,
        autoplay: true,
        pauseOnHover: false,
        arrows: false,
        autoplaySpeed: 5000,
        mobileFirst: true
    });
}

$('#scrollDown a').click(function(e){
    e.preventDefault();
    $('body,html').animate({ scrollTop: $(window).height()});
    return 0;
});

我的代码中存在一些明显的滞后问题吗？

Answer 1

您可以使用以下内容：

$('button').click(function (e) {
    e.preventDefault();
    var transforms = getTransforms('translate3d(0px, -' + $(window).height() + 'px, 0px)')
    $('body,html').css(transforms);
});

//taken from fullPage.js 
//@see https://github.com/alvarotrigo/fullPage.js
function getTransforms(translate3d) {
    return {
        '-webkit-transform': translate3d,
            '-moz-transform': translate3d,
            '-ms-transform': translate3d,
            'transform': translate3d
    };
}

使用以下CSS创建转换：

html,body{
   -webkit-transition: transform 900ms ease;
   transition: transform 900ms ease;
}

Demo online

请记住，这在没有CSS3支持的浏览器中无法运行。对jQuery的回退将是正确的解决方案。但是，如果你只关心现代浏览器，那么它就可以了。

如果您打算创建一个全屏网站，我建议您直接尝试fullPage.js，这可以为您节省大量时间。

jQuery scrollTop是滞后的

1 个答案: