Question

我在使用滚动效果在Firefox中工作时遇到问题，我使用此代码在Chrome，Safari和Opera中正常运行，我无法看到＆＃39; -moz-的错误变换＆＃39;代码行。

我已经在Firefox浏览器中检查了它，它只显示以下内容

$(window).scroll(function(){


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

    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-moz-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-webkit-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)',
        '-o-transform': 'rotate(' + ($body.scrollTop() / bodyHeight * -360) + 'deg)'
    });

});

旋转值保持为零，我对jQuery相当新，我不知道如何从这里调试。请参阅下面的代码：

function show_image(src) {
  var img = document.createElement("img");
  img.src = src;
  img.className = "some-class-name";
  document.body.appendChild(img);
}

Answer 1

请使用此功能，如有任何问题，请与我联系。

$(window).on('scroll', function() {

  var cog = $('div'),
    body = $(document),
    bodyHeight = body.height();

  cog.css({
    'transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-o-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-moz-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
    '-webkit-transform': 'rotate(' + (body.scrollTop() / bodyHeight * -360) + 'deg)',
  });

});

body {
  min-height: 900px;
}
div {
  transform: rotate(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  rotate this
</div>

document.body为null的常见原因是因为您在遇到标记（*）之前正在执行脚本。没有看到代码我不能肯定地说，但这是通常的原因。移动你放置脚本的位置。

请访问此问题以获取详细信息。

Why is document.body == null in Firefox but not Safari

使用jQuery滚动效果转换不在firefox中工作

1 个答案: