Question

我有一个div列表，滚动时用户可以看到。

<div class="fdsfad" id="idd0">
--------
<div>

<div class="fdsfad" id="idd1">
--------
<div>

<div class="fdsfad" id="idd2">
--------
<div>

<div class="fdsfad" id="idd3">
--------
<div>

<div class="fdsfad" id="idd4">
--------
<div>

<div class="fdsfad" id="idd5">
--------
<div>

<div class="fdsfad" id="idd6">
--------
<div>

在滚动时，我想检查哪个idd在视口中。我想的是：

window.addEventListener("scroll", function (e) {
            console.log(e);
            // console.log(document.querySelectorAll('[id^="idd"]'));
            // if ( document.getElementById("idd"+cur_id).length !== 0)
            // {
            //  // console.log("the element is visible.");
            // }
         });

我想知道使用正则表达式idd*可见的元素的确切ID。我怎样才能做到这一点？

Answer 1

已经过了9个小时，没有回答。所以，我发布了我用过的黑客。

首先，我将所有div放在另一个div中：

<div id="mainContent">
// mydiv

</div>

现在，我在滚动后计算了高度：

 window.addEventListener("scroll", function (e) {
        let div_height = document.getElementsByClassName("tupleOuterDiv")[1].clientHeight;
        let curr_scroll_position = Math.abs(document.getElementById("mainContent").getBoundingClientRect().top);
         // console.log("div_height",div_height);
         // console.log("curr_scroll_position",curr_scroll_position);
            let last_index = (Math.floor((curr_scroll_position/div_height)))


         });

我计算了单个div高度：

let div_height = document.getElementsByClassName("tupleOuterDiv")[1].clientHeight;

然后我计算了总滚动高度：

let curr_scroll_position = Math.abs(document.getElementById("mainContent").getBoundingClientRect().top);

然后，curr_scroll_position/div_height给出了div的索引。

检查滚动正则表达式上可见的ID

1 个答案: