jQuery scrollTop 有延迟

Question

我有一个网站，其中页面顶部是一个图像滑块（光滑），它是框架的 100% 宽度和 100% 高度。我还有一个 "scroll down" 按钮，它使用 jQuery 将页面向下滚动一帧。

这个动画很慢，我想知道这个动画是否有可能被 slick-animation 干扰了。

所以我有这个 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 有延迟

jQuery scrollTop is laggy

jquery

lag