javascript - 查找元素与可滚动 div 顶部的交汇点

Question

我有一个可滚动的 div 容器，可在其容器内容纳多个“页面”(或 div)。

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

举个例子。如果我在 top:50px 的一个红色框内有一个绝对 div 元素。如果我滚动到那个 div 元素到达我的可滚动容器顶部的位置。触发器应该说我在我的红色容器的 50px 处。

我很难掌握如何实现这一点，但我已经尝试过类似的事情:

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

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

这是我的代码和一个jsfiddle更好地支持我的问题。

注意:如有必要，我会在我的元素中使用 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>

CSS

#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;
}

JS

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 向上移动。

所以我想要完成的是，当用户点击“我”按钮或 #click(如下面的 fiddle 所示)时，我想知道那个特定的 .formContainer，它是否触及#pageContainer的顶部。

我确实在真实世界的应用程序中使用了 scroll spy，所以我知道哪个 .formContainer 最接近顶部。因此，如果您只想定位一个 .formContainer，那很好。

我以这些白色的 div 元素为例。如果我正在滚动 #pageContainer，并且当我滚动并单击“我”时那个白色的 div 元素位于屏幕顶部，单击触发器应该提醒我 。 formContainer 与 #pageContainer 的顶部相距 50px。如果红色容器刚好接触到 #pageContainer 的顶部，它应该说它距离顶部 0px。

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

这是一个 updated jsfiddle这显示了我想要发生的那种 Action 。

Answer 1

我正在试一试，因为我发现这些东西很有趣。这可能只是一个起点，因为我今天头疼而且思维不清晰。我敢打赌它可以被清理和简化一些。

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

相反，我尝试考虑填充和边距，使用遍历父对象直到 pageContent 的循环来获取相对于该元素的偏移量。因为表单嵌套在 pageContent 元素的深处，所以您不能使用 position()。您也不能使用 offset()，因为它随滚动而变化。循环方法使我能够将顶部边距/填充考虑在内。我没有完整地查看其他提出的解决方案，因此可能有更短的方法来实现这一点。

请记住比例会影响子元素的实际位置，在获取实际位置时必须除以比例百分比。为此，我将 scalePercentage 移动到全局变量，以便缩放功能和点击可以使用它。

这是我所做工作的核心。实际的 fiddle 有更多的日志记录和垃圾:

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;

更新的 Fiddle(忘记考虑 get func 中的比例):http://jsfiddle.net/e6vpq9c8/5/