Question

我有一个可滚动的div容器适合多个＆＃34;页面＆＃34; （或div＆＃39; s）在其容器内。

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

所以举个例子。如果我在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。

所以我想要完成的是，当用户点击＆＃34; ME＆＃34;按钮或#click（如下面的小提琴所示），我想知道该.formContainer中的哪个位置触及#pageContainer的顶部。

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

我使用这些白色div元素作为例子。如果我正在滚动#pageContainer，并且当我滚动时，白色div元素位于屏幕顶部，我点击了＆＃34; ME＆＃34;，点击触发器应警告我{{1触摸.formContainer的顶部，距离顶部50px。如果，红色容器刚刚触及#pageContainer的顶部，则应该说它距离顶部是0px。

我希望这有助于消除一些误解。

这是updated jsfiddle，显示了我想要发生的行动。

Answer 1

如果我理解你的问题，你想要的是当某些后代元素到达外部容器的顶部时，然后确定可见＆＃34;页面的位置＆＃34; （div与formContainer}相对于顶部。{/ p>

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

<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>

然后是代码：

// arbitrary horizontal offset - customize for where your trigger elements are placed horizontally
var X_OFFSET = 100;

// determine once, at page load, where outer container is on the page
var outerContainerRect;
$(document).ready(function() {
    outerContainerRect = $("#pageContent").get(0).getBoundingClientRect();
});

// when outer container is scrolled
$("#pageContent").scroll(function(e) {
    // determine which element is at the top
    var topElement = $(document.elementFromPoint(outerContainerRect.left+X_OFFSET, outerContainerRect.top));
    /*
    // if a trigger element
    if (topElement.hasClass("triggerElement")) {
        // get trigger element's position relative to page
        console.log(topElement.position().top);
    }
    */

    var page = topElement.closest(".formContainer");
    if (page.length > 0) {
        console.log(-page.get(0).getBoundingClientRect().top);
    }

});

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

http://jsfiddle.net/j6ybgf58/23/

编辑＃2：一种更简单的方法，因为您知道要定位哪个formContainer：

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

http://jsfiddle.net/rL4Ly3yy/5/

但是，它仍会根据窗口的大小给出不同的结果。这似乎是不可避免的 - zoomProject和resize函数显式调整了内容的大小，因此如果您希望在原始坐标系中使用，则必须将逆变换应用于从此代码中获得的数字。

Answer 2

我正在给这个刺，因为我发现这些东西很有趣。这可能只是一个起点，因为我今天头疼并且没有直接思考。我愿意打赌它可以清理并简化一些。

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

相反，我试图考虑填充和边距，使用循环通过父对象直到pageContent来获取相对于该元素的偏移量。因为表单嵌套在pageContent元素内部的几层，所以你不能使用position（）。你也不能使用offset（），因为它随着滚动而改变。循环方法允许我将上边距/填充因子考虑在内。我还没有完全看到提出的其他解决方案，因此可能有更短的方法来实现这一点。

请记住，比例将影响子元素的ACTUAL位置，在获取实际位置时，您必须除以比例百分比。为此，我将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/

Answer 3

我不完全明白你需要什么，但如果我是正确的，这应该做的伎俩

$("#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');
    }
});

ScrollHeight是对象的完整高度，包括可滚动像素。 ScrollTop是从顶部滚动的像素数量。

Answer 4

您可以根据自己的滚动位置使用航点来检测div的位置。

以下是其官方网站的示例链接http://imakewebthings.com/waypoints/shortcuts/inview/

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

以下是我的代码和jsfiddle以更好地支持我的问题。

修改：

4 个答案: