2

スクロール時に要素を回転させるアニメーションを実行しています。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

4

1 に答える 1

3

問題は変換ではありません。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)'
    });
});
于 2013-09-03T13:56:36.360 に答える