Document.scroll 不适用于多个 html 页面
[英]Document.scroll doesn’t work with multiple html pages
问题描述
I have multiple html pages (Page A and Page B) and I need to detect if certain divs on each page are in view while the user is scrolling on either page.
我有多个 html 页面（页面 A 和页面 B），当用户在任一页面上滚动时，我需要检测每个页面上的某些 div 是否在视图中。 Both pages link to each other and share the same js script.两个页面相互链接并共享相同的 js 脚本。 The problem right now is that when I scroll and navigate to the other page, it only detects the divs for pageA but not for pageB.现在的问题是，当我滚动并导航到另一个页面时，它只检测到 pageA 的 div 而不是 pageB。 When I comment out the function for pageA (checkPageA()), then it works for pageB.当我为pageA（checkPageA（））注释掉function时，它适用于pageB。 I'm not sure what's going on and why it's not working for both pages.我不确定发生了什么以及为什么它不适用于两个页面。
I'm not sure how to show multiple html pages here, so here's a simplified version of my code (doesn't run since the pages aren't connected here).我不确定如何在此处显示多个 html 页面，因此这是我的代码的简化版本（由于页面未在此处连接，因此无法运行）。 I want to keep both pages separate HTML files and not combine them.我想将两个页面分开 HTML 文件，而不是将它们合并。 Thanks!谢谢！
$(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>
2 个解决方案
解决方案1
0 2021-01-02 05:46:58
Ah, I just figured this out.啊，我刚想通了。 There was something wrong with my percentInViewport function due to the null elements.由于 null 元素，我的 percentInViewport function 有问题。 As someone suggested, did some debugging from the console and the scroll works haha.正如有人建议的那样，从控制台进行了一些调试并且滚动工作哈哈。 Thanks!谢谢！
解决方案2
0 2021-01-02 05:49:20
The issue with you code because when you are on the second page the checkPageA function is called when you scroll and the class that is given in is not found and it will give error.您的代码存在问题，因为当您在第二页上时，当您滚动时会调用 checkPageA function 并且找不到给出的 class 并且它会给出错误。
instead of creating different function, and different class for every page you can use one common function and one common 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.