jquery - 动画不是使用“变换：旋转”的跨浏览器

Question

我正在做一个动画来在你滚动时旋转元素，让它在 webkit 中工作，但不能在其他浏览器中工作：

jQuery

var $cog = $('#cog'),
    $body = $(document.body),
    bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        // this work
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',

        // this not work
        '-moz-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',
        '-ms-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)',
        '-o-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });
});

JSFIDDLE

Answer 1

问题不在于转换。如果您尝试记录 scrollTop 值，您会看到 firefox 始终返回 0，这是因为 ff 将滚动附加到 html，而不是正文。这是一个跨浏览器的解决方案：

http://jsfiddle.net/jonigiuro/kDSqB/9/

var $cog = $('#cog'),
    $body = $('body'),
    bodyHeight = $body.height();

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

$(window).scroll(function () {
    var scroll = getScrollTop();
    $cog.css({
        'transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-webkit-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-moz-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-ms-transform': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)',
        '-o-transform:rotate': 'rotate(' + (scroll / bodyHeight * 360) + 'deg)'
    });
});