如何根据滚动查找DIV的ID？

Question

Now I have to find the div id on scroll. 现在，我必须在滚动条上找到div ID。 And In some cases my page height will be different 在某些情况下，我的页面高度会有所不同

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. 但是正在获取所有值。我只想找到滚动位置所在的ID。

Thanks in advance. 提前致谢。

Answer 1

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>

如何根据滚动查找DIV的ID？

问题描述

1 个解决方案

解决方案1
2 2018-08-14 13:31:31

如何根据滚动查找DIV的ID？

问题描述

1 个解决方案

解决方案1 2 2018-08-14 13:31:31

解决方案1
2 2018-08-14 13:31:31