使滚动动画不停止但平滑答案

【问题标题】：Making the scroll animation not stopping but smooth使滚动动画不停止但平滑
【发布时间】：2013-04-17 04:04:03
【问题描述】：

你们有什么办法让这个 (http://hvlmnns.de/middle/) 更顺畅吗？在我的系统上它有点卡住了。

如果有这种ios后卷效果也不错。

这里是代码

$(document).ready(function(){
    var wx=$(window).width(),wy=$(window).height(),dx=$(document).width(),dy=$(document).height();
$('html,body').width(dx).height(dy).stop().animate({scrollTop:(dy-wy)/2,scrollLeft:((dx-wx)/2)},0);
$(document).mousemove(function(e){
    var x=(dx-wx)*((e.pageX-$(window).scrollLeft())/wx);
    var y=(dy-wy)*((e.pageY-$(window).scrollTop())/wy);
    $('body').scrollLeft(x).scrollTop(y);

});
});

我不确定这个 animate 和 dequeue() 的东西，但我认为它最终会是解决方案，但我说不知道如何平滑滚动动画而不一直停止。

【问题讨论】：

尝试使用 requestAnimationFrame 编写自己的动画。在 mousemove 上更改变量，在 requestAnimationFrame 循环中使用它们。
funny :) 它确实取决于它卡住的 cpu，因为我移动带小数位的像素
我喜欢你的问题 +1
@StefanHövelmanns 然后使用 Math.round(dx) 而不是 dx 或其他东西，以获得整数。
它在我的机器上运行流畅。使用任何特定的浏览器？

标签： jquery animation scroll smooth

【解决方案1】：

有点想通了 http://hvlmnns.de/middle/

不是最顺利的事情，也不是最好的，但这必须完成这项工作

$(document).ready(function () {
    $('body').css({
        position: 'relative',
        margin: 0,
        padding: 0,
        overflow: 'hidden',
        width: '100%',
        height: '100%'
    })
    var wx = $(window).width(),
        wy = $(window).height(),
        dx = $(document).width(),
        dy = $(document).height();
    $('body').width(dx).height(dy).scrollTop((dy - wy) / 2).scrollLeft((dx - wx) / 2);
    var x = 0,
        y = 0;
    $(document).mousemove(function (e) {
        x = (dx - wx) * ((e.pageX - $(window).scrollLeft()) / wx);
        y = (dy - wy) * ((e.pageY - $(window).scrollTop()) / wy);
    });
    var obj = $('body');
    var xp = 0,
        yp = 0;
    $('body').scrollTop((dy - wy) / 2).scrollLeft((dx - wx) / 2);
    var loop = setInterval(function () {
        xp += (x - xp) / 60;
            yp += (y - yp) / 60;
        obj.scrollTop(yp).scrollLeft(xp);
    }, 1);
});

【讨论】：