javascript js滚动到指定元素 检测用户何时使用jQuery滚动到div底部




js设置元素scrolltop (9)

我有一个div盒子(称为flux),其内容可变。 这个divbox的溢出设置为auto。

现在,我试图做的是,当使用滚动到此DIV框的底部,加载更多的内容到页面中,我知道如何做到这一点(加载内容),但我不知道如何检测用户何时滚动到div标签的底部? 如果我想在整个页面上做,我会把.scrollTop从.height中减去。

但我似乎无法在这里做到这一点?

我尝试过从flux中取出.scrollTop,然后将所有内容都包裹在一个名为inner的div中,但是如果我将innerHeight作为flux,它会返回564px(div设置为500,高度),'innner'它返回1064,并且在div的底部显示564时,该滚动顶部。

我能做什么?


Answer #1

如果有人将scrollHeightundefined ,那么选择元素的第一mob_top_menu[0].scrollHeight元素: mob_top_menu[0].scrollHeight


Answer #2

如果您未使用Math.round()函数,则在浏览器窗口变焦时,Dr.Molle suggested的解决方案在某些情况下不起作用。

例如$(this).scrollTop()+ $(this).innerHeight()= 600

$(this)[0] .scrollHeight yield = 599.99998

600> = 599.99998失败。

这是正确的代码:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

如果您不需要严格的条件,您还可以添加一些额外的边距像素

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

Answer #3

尽管5.5年前问了这个问题,但在今天的UI / UX环境中它仍然比较相关。 我想补充我的两分钱。

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

来源: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolledhttps://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled


Answer #4

如果你需要在一个div上使用这个溢出-y作为隐藏或滚动,这样的东西可能是你需要的。

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

我发现ceil是需要的,因为prop scrollHeight似乎是圆形的,或者可能是由于其他原因造成这个不到1的原因。


Answer #5

不知道它是否有帮助,但这是我如何做到的。

我有一个更大的窗口的索引面板,我让它滚动,直到达到这个索引的末尾。 然后我将它固定在位。 一旦您向页面顶部滚动,过程就会逆转。

问候。

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>

Answer #6

这里有一个额外的说明,因为我在寻找固定div的解决方案时发现此问题,因此我想滚动该解决方案。 对于我的情况,我发现它更喜欢考虑到div上的填充,所以我可以完全按照结尾。 因此,扩展@ Dr.Molle的答案我添加以下内容

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

这会给你确切的位置,包括填充和边框


Answer #7

我找到了一个解决方案,当你滚动你的窗口,并从底部显示一个div结束给你一个警报。

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

在这个例子中,如果你向下滚动div( .posts )完成它给你一个警报。


Answer #8

这虽然为我工作

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

Answer #9

伙计们这是解决缩放问题的办法,它适用于所有缩放级别,以防万一需要它:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }






jquery