找到元素与可滚动div顶部的位置

Question

我有一个可滚动的div容器div,可以在容器内部放置多个"页面"(或者).

我的目标是,在任何给定的时刻,弄清楚我的红色容器内部到达可滚动容器的顶部.因此它可以是滚动事件的常量,也可以是触发此任务的按钮.

所以举个例子.如果我的一个红色框中有一个绝对div元素top:50px.如果我滚动到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,.formContainerdiv会向上移动#pageContainer.

所以我想要实现的是,当用户点击"我"按钮或#click(如下面的小提琴所示)时,我想知道在哪个特定的位置.formContainer,它是否触及顶部#pageContainer.

我在我的真实应用程序中使用滚动间谍,所以我知道哪个.formContainer最接近顶部.所以,如果你只想定位一个.formContainer,那很好.

我以这些白色div元素为例.如果我正在滚动#pageContainer,并且当我滚动时白色div元素位于屏幕顶部并且我点击"ME",则点击触发器应警告我从顶部.formContainer触及#pageContainer50px的顶部.如果,红色容器刚刚触及顶部#pageContainer,则应该说它距离顶部是0px.

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

这是一个更新的jsfiddle,显示了我想要发生的那种动作.

Answer 1

我尝试一下是因为我发现这些事情很有趣。这可能只是一个起点，因为我今天头疼并且思维不清晰。我愿意打赌它可以被清理和简化一些。

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

相反，我尝试考虑填充和边距，使用循环遍历父对象直到 pageContent 来获取相对于该元素的偏移量。由于表单嵌套在 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 中的规模）：http://jsfiddle.net/e6vpq9c8/5/