jquery - 使用 "transform: rotate"动画不能跨浏览器

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)'
    });
});