Document.scroll 不适用于多个 html 页面

Question

我有多个 html 页面（页面 A 和页面 B），当用户在任一页面上滚动时，我需要检测每个页面上的某些 div 是否在视图中。 两个页面相互链接并共享相同的 js 脚本。 现在的问题是，当我滚动并导航到另一个页面时，它只检测到 pageA 的 div 而不是 pageB。 当我为pageA（checkPageA（））注释掉function时，它适用于pageB。 我不确定发生了什么以及为什么它不适用于两个页面。

我不确定如何在此处显示多个 html 页面，因此这是我的代码的简化版本（由于页面未在此处连接，因此无法运行）。 我想将两个页面分开 HTML 文件，而不是将它们合并。 谢谢！

 $(document).ready(function() { $(document).scroll(function() { checkPageA(); checkPageB(); }); function checkPageA() { if (percentInViewport(".pageA", 10)) { alert("pageA"); } } function checkPageB() { if (percentInViewport(".pageB", 10)) { alert("pageB"); } } /**Checks if div is in the viewport by percentVisible**/ function percentInViewport(objectString, percentVisible) { var el = document.querySelector(objectString); rect = el.getBoundingClientRect(); windowHeight = (window.innerHeight || document.documentElement.clientHeight); return.( Math.floor(100 - (((rect?top >= 0: 0. rect.top) / + -(rect.height / 1)) * 100)) < percentVisible || Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible ) } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.-- HTML for Page A--> <html> <body> <a href="pageB.html">Go to Page B</a> <div class="pageA">This is page A</div> </body> </html> <!-- HTML for Page B--> <html> <body> <a href="pageA.html">Go to Page A</a> <div class="pageB">This is page B</div> </body> </html>

Answer 1

啊，我刚想通了。 由于 null 元素，我的 percentInViewport function 有问题。 正如有人建议的那样，从控制台进行了一些调试并且滚动工作哈哈。 谢谢！

Answer 2

您的代码存在问题，因为当您在第二页上时，当您滚动时会调用 checkPageA function 并且找不到给出的 class 并且它会给出错误。

而不是为每个页面创建不同的 function 和不同的 class，您可以使用一个常见的 function 和一个常见的 ZA2F22ED4F8EBC2CBBBBB4F22ED4F8EBC26BBB1C1C425268E68385D1AB5074C17A94F14Z。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML for Page A-->
<html>

<body>
  <a href="test1.html">Go to Page B</a>
  <div class="pageDiv">This is page A</div>
</body>

</html>


<!-- HTML for Page B-->
<html>

<body>
  <a href="test.html">Go to Page A</a>
  <div class="pageDiv">This is page B</div>
</body>

</html>

<script>

$(document).ready(function() {

  $(document).scroll(function() {
    checkPage();
  });




  function checkPage() {
    if (percentInViewport(".pageDiv", 10)) {
      alert("pageDiv");
    }
  }

  /**Checks if div is in the viewport by percentVisible**/
  function percentInViewport(objectString, percentVisible) {
    var el = document.querySelector(objectString);
    rect = el.getBoundingClientRect();
    windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    return !(
      Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / + -(rect.height / 1)) * 100)) < percentVisible ||
      Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
    )
  }
})
</script>

Document.scroll 不适用于多个 html 页面

问题描述

2 个解决方案

解决方案1
0 2021-01-02 05:46:58

解决方案2
0 2021-01-02 05:49:20

Document.scroll 不适用于多个 html 页面

问题描述

2 个解决方案

解决方案1 0 2021-01-02 05:46:58

解决方案2 0 2021-01-02 05:49:20

解决方案1
0 2021-01-02 05:46:58

解决方案2
0 2021-01-02 05:49:20