Javascript 查找元素与可滚动div顶部相交的位置

我有一个可滚动的

div

容器，可以在其容器中容纳多个“页面”（或

div

）

我的目标是，在任何给定的时刻，找出red容器中它到达可滚动容器顶部的位置。因此，它可以是一个恒定的滚动事件，也可以是触发此任务的按钮

比如说。如果在

顶部的一个红色框中有一个绝对div元素：50px

。如果我滚动到div元素到达可滚动容器顶部的位置。触发器应该显示我在红色容器的

50px

我很难理解如何实现这一点，但我尝试过以下方法：

$("#pageContent").scroll(function(e) {
    console.log($(this).scrollTop());   
});

但它没有考虑到单独的页面，我不相信它完全准确，取决于比例。任何指导或帮助都将不胜感激

这是我的代码和一个更好地支持我的问题的例子。 注意：如果需要，我会在项目中使用scrollspy，以便确定需要检查的红色容器

HTML

<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
    <div id="formBox" style="height: 9248.627450980393px;">
        <div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
            <div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
                <form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
                    <div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
                        <div class="formContent">
                            <div class="formBackground">
                                <div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
                            </div>
                        </div>
                    </div>
                    <div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_2">
                        <div class="formContent">
                            <div class="formBackground"><div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">This should still say 50px</div></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

JS

#pageContent {
    position:relative;
    padding-bottom:20px;
    background-color:#fff;
    z-index:2;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
#formBox {
    display: block;
    position: relative;
    height: 100%;
    padding: 15px;
}
.trimSpace {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    overflow: hidden;
}
#formScale::after {
    display: block;
    content:'';
    padding-bottom:5px;
}
#formScale {
    position:relative;
    width:816px;
    margin:0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
}
.formContainer {
    position:relative;
    margin : 0 auto 15px auto;
    padding:0;
}
.formContent {
    position:absolute;
    width:100%;
    height:100%;
}
.formBackground {
    width:100%;
    height:100%;
    background-color:red;
}

var PAGEWIDTH = 816;

$(window).resize(function (e) {
    zoomProject();
    resize();
});

function resize() {
    $("#pageContent").css('height', window.innerHeight - 45 + 'px');
}

function zoomProject() {
    var maxWidth = $("#formBox").width(),
        percent = maxWidth / PAGEWIDTH;
    $("#formScale").css({
        'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')',
        '-ms-transform': 'scale(' + percent + ')'
    });
    $(".trimSpace").css('width', (PAGEWIDTH * percent) + 'px');
    $("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}

zoomProject();
resize();

---

编辑： 我不认为我在传达我想要完成的事情方面做得很好

目前有两个

.formContainer

。当我滚动

#pageContainer

时，

.formContainer

div在

#pageContainer

中上移

因此，我想完成的是，当用户单击“我”按钮或

#单击
（如下图所示）时，我想知道它在哪个特定的
.formContainer
，是否触到了
#pageContainer
的顶部

我在现实世界的应用程序中确实使用了scroll spy，因此我知道哪个
.formContainer
最接近顶部。因此，如果您只想针对一个
.formContainer
，这很好

我以这些白色div元素为例。如果我正在滚动
#pageContainer
，并且在滚动时白色div元素位于屏幕顶部，并且我单击“我”，则单击触发器应提醒我
。formContainer
正在从顶部以50px的速度触碰到
#pageContainer
的顶部。如果红色容器刚好接触到
#pageContainer
的顶部，则应表示距离顶部为0px

我希望这有助于澄清一些误解

下面是一个示例，它显示了我希望执行的操作。
如果我正确理解了您的问题，那么您希望捕获某些子元素何时到达外部容器的顶部，然后确定可见“页面”（
div
with class
formContainer
）相对于顶部的位置

如果是这样，第一项任务是标记可能触发此操作的特定元素：

<div class='triggerElement' style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>

编辑：根据您的评论，将代码更改为检查
formContainer
元素，而不是后代元素


编辑#2:一种更简单的方法，因为您知道要针对哪个
formContainer
：

$("#pageContent").scroll(function(e) {
    console.log($(this).scrollTop() - $("#xzOwqphM4GGR_1").position().top);
});


但是，它仍然会根据窗口的大小给出不同的结果。这似乎是不可避免的-zoomProject
和resize

函数正在明确调整内容的大小，因此，如果您希望在原始坐标系中使用此代码，则必须对从中获得的数字进行逆变换。

我不完全理解您需要的是什么，但如果我是对的，这应该会起作用

$("#pageContent").scroll(function(e) {
    // If more then 50 pixels from the top has been scrolled
    // * if you want it to only happen at 50px, just execute this once by removing the scroll listener on pageContent
    if((this.scrollHeight - this.scrollTop) < (this.scrollHeight - 50)) {
        alert('it is');
    }
});

$（“#页面内容”）。滚动（功能（e）{
//如果从顶部滚动超过50个像素
//*如果您希望它只发生在50px，只需删除pageContent上的滚动侦听器即可执行一次
如果（（this.scrollHeight-this.scrollTop）<（this.scrollHeight-50））{
警惕（“它是”）；
}
});

ScrollHeight是对象的完整高度，包括可滚动像素。

---

ScrollTop是从顶部滚动的像素量。

您可以使用航路点根据滚动的位置检测div的位置

---

这里有一个链接指向他们官方网站的示例：

我尝试一下，因为我发现这些东西很有趣。这可能只是一个开始，因为我今天头痛，思维不清。我敢打赌它可以被清理和简化一些

我也可能使我所采取的方法过于复杂，得到了第一个可见的形式和定位。我也没有使用getBoundingClientRect函数

相反，我尝试考虑填充和边距，通过父对象到页面内容的循环来获得相对于该元素的偏移量。由于表单嵌套在pageContent元素的深层，因此不能使用position（）。您也不能使用offset（），因为它随滚动而改变。循环方法允许我考虑顶部边距/填充。我还没有充分考虑其他提出的解决方案，因此可能有一个较短的方法来实现这一点

请记住，比例将影响子图元的实际位置，在获取实际位置时，必须除以比例百分比。为此，我将scalePercentage移到了一个全局变量，这样缩放函数和单击就可以使用它

这是我所做的核心。实际的小提琴有更多的记录和垃圾：

var visForm = getVisibleForm();
var formTop = visForm.position().top;

var parents = visForm.parentsUntil('#pageContent');
var truOffset = 0;
parents.each(function() {
    truOffset -= $(this).position().top;
});
// actual location of form relative to pageContent visible pane
var formLoc = truOffset - formTop;   
var scaledLoc = formLoc / scalePercent;

---

更新的提琴（忘记考虑get func中的比例）：

为什么要重新发明轮子。只需使用或之类的插件。这里有一个谢谢，但我并没有试图在元素到达页面顶部时触发它。这只是一个应该返回的示例。我只想知道

formContainer

与

pageContent

顶部的关系@Miroa和agian miro，在中的jquery插件的情况下重新发明轮子。P

var visForm = getVisibleForm();
var formTop = visForm.position().top;

var parents = visForm.parentsUntil('#pageContent');
var truOffset = 0;
parents.each(function() {
    truOffset -= $(this).position().top;
});
// actual location of form relative to pageContent visible pane
var formLoc = truOffset - formTop;   
var scaledLoc = formLoc / scalePercent;