Question

我在可滚动容器中有这些“页面”又名div。在命令上，我试图找出有问题的div的哪一部分触及.pageContent的顶部。

例如，在页面加载时，#page_1的任何部分都没有触及pageContent的顶部，但是当我向下滚动时。 #page_1点击.pageContent的顶部，我现在想知道它在哪里。

我知道我可以使用.pageContent获得$("#pageContent").scrollTop()的位置，但这些页面可能有不同的尺寸，我不知道该如何解决这个问题。

有人能让我朝着正确的方向前进吗？

jsfiddle

HTML

<div id="pageContent">
    <div id="page_1" class="content"></div>
    <div id="page_2" class="content"></div>
    <div id="page_3" class="content"></div>
</div>

CSS

#pageContent {
    overflow: auto;
    width:500px;
    height:300px;
    padding:10px;
    border:1px solid black;
    background-color:grey;
}
.content {
    height:400px;
    width:300px;
    margin:0 auto;
    background-color:red;
    margin-bottom:10px;
}

Answer 1

您可以使用jQuery .position（）函数来计算每个页面相对于容器顶部的位置。请参阅this Fiddle。

例如，对于＃page_1，

var page1 = $('#page_1');
$('#pageContent').scroll(function() {
    // page1.position().top gives the position of page_1 relative to the
    // top of #pageContent
});

Answer 2

可以使用

ScrollTop，我不推荐它。

将滚动事件附加到主div和侦听器中，以获取其中的所有对象：

$('#pageContent').scroll(function(){

    var pages = $("#pageContent > .content");
    for (var i = 0; i < pages.length; i++)
    {
        if ($(pages[i]).position().top < 0 && ( $(pages[i]).position().top + $(pages[i]).outerHeight() ) > 0) 
        {
            var outerHeight = $(pages[i]).outerHeight();
            var pixels = (outerHeight - (outerHeight + $(pages[i]).position().top));

            console.log("These pixels are in view between: " + pixels + " and " + outerHeight );
        }
    }

})

每次div滚动时都会执行循环检查所有元素的位置。如果元素滚出视图，则触发if的顶部，计算当前可见页面的剩余可见像素。

这使用jQuery的：position()和outerHeight()以及JavaScript的原生offsetTop。

http://jsfiddle.net/q5aaLo9L/4/

Answer 3

我试过这样的事情

$(document).ready(function () {
    var divs = $('.content').map(function (i, el) {
        return $(el).offset().top - $(el).parent().offset().top;
    });
    $('#pageContent').scroll(function () {
        var index = findIndex($(this).scrollTop(), divs) - 1;
        if (index > -1) {
            console.log($(this).children().eq(index).attr('id'));
        } else {
            console.log('outside');
        }

    });
});

function findIndex(pos, divs) {
    return (divs.filter(function (el, et) {
        return et <= pos
    }).length);
}

这不是超级干净的代码，因为我必须快速完成。 DEMO 我希望这有帮助

Answer 4

我嘲笑它，它使用JQuery的each（）函数来遍历页面并返回已突破框顶部的页面信息。

我不确定你的问题到底想要什么返回，所以我让它返回清除顶部边框的页面百分比，顶部边框的位置（像素的负值） “page”与内容容器有关，也只是该div的ID。

var getCurrentPage = function(){

    var page;
    var position; 
    var percentageRead; 

    $('.content').each(function(){ 

        if($(this).position().top <= 0){ 
           page = $(this);
           position = $(this).position().top;
        } 

    });


    percentageRead = ((position *-1)/ $(page).height()* 100); 


    console.log(page.attr('id'));
    console.log(position);
    console.log(percentageRead + '%');

}

$('#pageContent').on('scroll', getCurrentPage);

您可以在任何事件中触发此事件，但我使用滚动来构建它。

在可滚动div中查找元素的位置

jsfiddle

4 个答案: