0

Now I have to find the div id on scroll. And In some cases my page height will be different

enter image description here

I tried:

var currentPageNum;
   var iFrame =  document.getElementById('viewer');

   console.log(iFrame)
if ( iFrame.contentDocument ) {
    currentPageNum= iFrame.contentDocument.getElementById('pageNumber').value;
    alert(currentPageNum);

}

But am getting all values.. I just want to find the id where the scroll position is located.

Thanks in advance.

Vishnu
  • 745
  • 12
  • 32
  • look at this answer https://stackoverflow.com/questions/33749223/javascript-scroll-current-views-element-id – Jordi Jordi Aug 14 '18 at 10:52
  • Ok thank you for your response. I will check – Vishnu Aug 14 '18 at 10:54
  • Possible duplicate of [How to get on-screen visible element objects in jQuery?](https://stackoverflow.com/questions/19498068/how-to-get-on-screen-visible-element-objects-in-jquery) – Bob Tate Aug 14 '18 at 11:08
  • @JordiJordi its working fine.. But I have to increase offset top value.. Because If I am coming to the last page its showing 69 instead of 70 – Vishnu Aug 14 '18 at 11:41
  • nice , then u can mark the question solved :) i'm glad to help u – Jordi Jordi Aug 14 '18 at 13:14

1 Answers1

3

You can make note of positions of elements on the screen and then write a handle for scroll events that find which element user has scrolled past based on their position.

Here is an example: 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
    </head>
    <body>
        <div class="findByScroll" id="element1" style="width: 100%; height: 500px;">Element 1</div>
        <div class="findByScroll" id="element2" style="width: 100%; height: 500px;">Element 2</div>
        <div class="findByScroll" id="element3" style="width: 100%; height: 500px;">Element 3</div>
        <div class="findByScroll" id="element4" style="width: 100%; height: 500px;">Element 4</div>
        <div class="findByScroll" id="element5" style="width: 100%; height: 500px;">Element 5</div>
        <div class="findByScroll" id="element6" style="width: 100%; height: 500px;">Element 6</div>
        <script>
            // Get all elements which have class findByScroll
            var elementsToFindByScroll = Array.prototype.slice.call( document.getElementsByClassName("findByScroll"));

            // Sort them by their position
            var sorted = elementsToFindByScroll.sort(function (a, b) {
                return a.getBoundingClientRect().top - b.getBoundingClientRect().top;
            });


            // Map their ids to their positions so we can reference them later
            var positionsToIdsMap = sorted.reduce(function(result, item) {
                var top = item.getBoundingClientRect().top;
                result[top] = item.id;
                return result;
            }, {});


            // When we scroll find which is the element we have scrolled past and log its id to console
            document.addEventListener("scroll", function () {
                var scrollValue = window.pageYOffset;
                var elementId = undefined;

                var keys = Object.keys(positionsToIdsMap);
                for (var i = 0; i < keys.length; i++) {
                    if (keys[i] > scrollValue) {
                        elementId = positionsToIdsMap[keys[i]];
                        break;
                    }
                }

                console.log(elementId);
            });
        </script>
    </body>
    </html>
Zawiszor
  • 528
  • 4
  • 10