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

动画不是跨浏览器使用“transform：rotate”

1 个答案: