javascript - 无法让scrollTop()在Chrome和Firefox中同时工作

标签 javascript jquery google-chrome firefox scrolltop

我无法让scrollTop() 方法在 Firefox 和 Chrome 中工作。我使用了 $('body, html').scrollTop(); 但是,它在 Chrome 中不起作用。只有 $('body').scrollTop(); 在 Chrome 中有效。任何想法将不胜感激。下面是我的代码。

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
  body {
    height: 2000px;
  }

  #light {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -200px;
    width: 800px;
    height: 400px;
    background-color: blue;
    z-index:1002;
    overflow: auto;
  }
</style>
</head>

<body>
  <div id="light">
  </div>

<!-- Used the google jQuery link for ease of use in this example   -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(window).scroll(function () {
        var offset = $('body, html').scrollTop();
        var view = $(window).height();
        var total = $(document).height();
        var percent = 1-(offset / (total - view));
        var widthFactor = 800*percent;
        var marginFactor = -(400*percent)

        if(percent > 0.33){
          $("#light").css({ "width" : widthFactor,
                      "margin-left" : marginFactor});
        };
      });
    });
  </script>
</body>
</html>

最佳答案

改用文档对象

$(document).scrollTop();

关于javascript - 无法让scrollTop()在Chrome和Firefox中同时工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18778020/

相关文章:

javascript - 单击带有 anchor #的链接不会转到页面顶部

javascript - RequireJS 文本插件和变量连接字符串

javascript - 在页面加载时将 aria-expanded ="true"更改为 false

javascript - 三个点 - 溢出 :ellipsis

wordpress - 在 Woocommerce 结帐表单中输入会导致浏览器报告 SSL 问题

非 SPA 的 JavaScript 架构

javascript - 在 Flickr API 的 Tags 参数内传递变量

javascript - 在两个 JSON 数组的条件下合并两个 JSON 对象

html - SVG 在 Firefox 中的呈现方式有所不同

javascript - 如何检测浏览器检查器窗口是否打开?