Question

有很多网站（例如www.9gag.com）检查您的滚动百分比并确定您是否减少了80％。如果是这样，它会显示更多内容。

我希望看到的代码示例：

$(window).scroll(function () {
    if(scroll.height >= 80%) {
        // the scroll is about 80% down.
    }
});

我想知道如何检查滚动条是否大约80％，就像那些网站一样？

Answer 1

您可以检查页面的高度，并将此值与当前位置进行比较。如果当前位置是高度的80％而不是运行某些代码。

$(window).scroll(function ()
{
    var content_height = $(document).height();
    var content_scroll_pos = $(window).scrollTop();
    var percentage_value = content_scroll_pos * 100 / content_height;

    if(percentage_value >= 80)
    {
        console.dir("the scroll is about 80% down.");
    }
});

没有测试，但应该做你想做的事情:)。

感谢Alvaro将我的代码添加到小提琴中：http://jsfiddle.net/2wSSS/7/

Answer 2

这就是你要做的事情：

//when scrolling...
$(window).scroll(function() {
    var windowsHeight = $(document).height() - $(window).height();
    var currentScroll = $(window).scrollTop();

    //if I scroll more than 80%
    if( ((currentScroll *100) / windowsHeight) > 80){
         //do whatever
   }
});

活生生的例子：http://jsfiddle.net/2wSSS/6/

Answer 3

$( document ).ready( function() {
    $( window ).bind( 'scroll', function( event ) {
        var win = $( this ),
            doc = $( document ),
            winH = win.height(),
            winT = win.scrollTop(),
            docH = doc.height(),
            interval = parseInt( winH * 0.2, 10 );

        if( docH - winH - winT < interval ) {
            console.log( 'the scroll is about 80% down' );
        }

    });
});

Answer 4

尝试

$(window).scroll(function () {

    if (($(window).scrollTop() + $(window).height()) > 0.8 * $(document).height()) {
        $('body').append("<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>")
    }
})

Fiddle

当页面滚动到80％以下时，是否添加了动态内容的示例

Answer 5

由于没有选择的答案，这里是我用来检测底部与像素的距离，而不是百分比：

if($(window).scrollTop() + $(window).height() > $(document).height() - 300) { });

jquery如何检查滚动几乎是否已关闭

5 个答案: