How do you know the scroll bar has reached bottom of a page

后端未结

关注

 4  773

I have a HTML page, when the scroll bar reaches bottom of the page I need to slide in a div from bottom-right containing an iframe.

Using JQuery I have implemented

相关标签:

4条回答

梦如初夏

2020-12-11 02:06

if (document.documentElement.clientHeight + 
    $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

0 讨论(0)

再見小時候

2020-12-11 02:12

$(window).scroll(function(){ // each time the scroll event is triggered
    if($(window).scrollTop() + screen.height > $('body').height()) {
        // if scroll has reached the bottom, execute this 
    }
};

0 讨论(0)

一个人的身影

2020-12-11 02:15
You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)
```
$(window).scroll(function(){ 
   console.log($(window).scrollTop() == ($(document).height() - $(window).height()));
})
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-11 02:21

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>JQuery | Detecting when user scrolls to bottom of div. 
    </title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">  
            Data Center  
        </h1> 
    <p id="data_center" style="font-size: 17px; font-weight: bold;"></p> 
    <center> 
        <div class="div" style="width:200px; height:150px; overflow:auto;"> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
        </div> 
    </center> 
    <script> 
        $('#data_center').text('Scroll till bottom to get alert!'); 
        jQuery(function($) { 
            $('.div').on('scroll', function() { 
                if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {                     
                    alert('End of DIV has reached!'); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html>

This worked for me. Enjoy the code :)

0 讨论(0)