滚动父div后如何检测哪个子元素可见？

Question

I would like to emulate something like "current page" using divs (like a PDF reader)

 document.addEventListener("DOMContentLoaded", function(event) { var container = document.getElementById("container"); container.onscroll = function() { let position = container.scrollTop; let divs = document.querySelectorAll('.page'); for (div of divs) { //??? } } });

 #container { width: 400px; height: 600px; overflow: auto; }.page { width: 400px; }.red { background-color: red; height: 600px; }.blue { background-color: blue; height: 400px; }

 Current page: <span id="page-counter">1</span> <div id='container'> <div id="div-1" class="page red"></div> <div id="div-2" class="page blue"></div> <div id="div-3" class="page red"></div> <div id="div-4" class="page blue"></div> </div>

So, I would like to know the best way to, for example, change span page-counter text to "3" when the third div "appears" .

Something like this: https://i.imgur.com/rXQ2Bw8.png

Thanks in advance Celso

Answer 1

Since this question never tagged jQuery, here's a pure Javascript solution that simulates the behavior you're looking for to the best of my knowledge. The solution calculates the amount of pixels of each child element currently visible within the container. If the amount is bigger or equal to half the size of the container, it assumes this is the page your visitor is looking at.

 function getVisibleHeight(element){ const container = document.getElementById("container"); let scrollTop = container.scrollTop; let scrollBot = scrollTop + container.clientHeight; let containerRect = container.getBoundingClientRect(); let eleRect = element.getBoundingClientRect(); let rect = {}; rect.top = eleRect.top - containerRect.top, rect.right = eleRect.right - containerRect.right, rect.bottom = eleRect.bottom - containerRect.bottom, rect.left = eleRect.left - containerRect.left; let eleTop = rect.top + scrollTop; let eleBot = eleTop + element.offsetHeight; let visibleTop = eleTop < scrollTop? scrollTop: eleTop; let visibleBot = eleBot > scrollBot? scrollBot: eleBot; return visibleBot - visibleTop; } document.addEventListener("DOMContentLoaded", function(event) { const container = document.getElementById("container"); const divs = document.querySelectorAll('.page'); container.addEventListener("scroll", () => { for(let i=0; i<divs.length; i++){ const containerHeight = container.clientHeight; // Gets the amount of pixels currently visible within the container let visiblePageHeight = getVisibleHeight(divs[i]); // If the amount of visible pixels is bigger or equal to half the container size, set page if(visiblePageHeight >= containerHeight / 2){ document.getElementById('page-counter').innerText = i+1; } } }, false); });

 #container { width: 400px; height: 300px; overflow: auto; }.page { width: 380px; }.red { background-color: red; height: 300px; }.blue { background-color: blue; height: 200px; }

 Current page: <span id="page-counter">1</span> <div id='container'> <div id="div-1" class="page red"></div> <div id="div-2" class="page blue"></div> <div id="div-3" class="page red"></div> <div id="div-4" class="page blue"></div> </div>

Answer 2

The general approach here would be to write a function that determines if a given HTML element is in the viewport. You could run the check as the user scrolls. See the snippet below for an example with jQuery. I'm not necessarily saying this is the best way to do this, but it seems to be working. Start scrolling to see the IDs appear.

 function isInViewPort(element) { // Function will determine if any part of the element is in the viewport. let $el = $("#" + element); let windowScrollTop = $(window).scrollTop(); let windowHeight = $(window).height(); let windowBottom = windowScrollTop + windowHeight; let elementTop = $el.offset().top; let elementOuterHeight = $el.outerHeight(); let elementBottom = elementTop + elementOuterHeight; let isAboveViewPort = elementBottom < windowScrollTop; let isBelowViewPort = windowBottom < elementTop; return;(isAboveViewPort || isBelowViewPort); } let currentDiv. $("#container"),on("scroll". function() { $("#container").find("div").each(function() { if (isInViewPort(this.id) && currentDiv.== this.id) { $("#page").html("Current ID is " + this;id) currentDiv = this;id; } }); });

 #container { overflow: auto; height: 300px; }.red { background-color: red; height: 600px; }.blue { background-color: blue; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span id="page"></span> <div id='container'> <div id="div-1" class="page red"></div> <div id="div-2" class="page blue"></div> <div id="div-3" class="page red"></div> <div id="div-4" class="page blue"></div> </div>

Answer 3

you can use the is visible feature in jQuery. Just give each div a unique ID or class.

if( $("#uniqueIdHere").is(':visible'))
   $(".page3Selector").addClass('active');

and then to remove the active class you could pair it up with an else statement to remove the class of the inactive div.