Jquery infinite scroll - with div not scrollbar of body

前端未结

关注

 3  1484

Suppose I have div and I want to fetch data and push data into that div. When the user scrolls within the div, the next set of data will be fetched and pushed into the div.

相关标签:

3条回答

你的背包

2020-12-04 23:17

How about something along the lines of:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       var new_div = '<div class="new_block"></div>';
       $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

This will append a new element to the main page container when the scrollbar reaches the bottom of the page. It also fills this new element with content loaded from an external script.

If you want to detect whether a user has scrolled to the bottom a specific div:

$('.some_element').bind('scroll', function(){
   if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
      var new_div = '<div class="new_block"></div>';
      $('.main_content').append(new_div.load('/path/to/script.php'));
   }
});

0 讨论(0)

孤独总比滥情好

2020-12-04 23:24

This code has been tested and verified as working. When you scroll your div, the code checks if the scroller reached to the bottom by comparing the scroller height against the scroller position. If so, it calls to a method that gets more content and append it to the div.

Enjoy!

Koby

$(document).ready(function () {
        $("div").scroll(function () {
            var $this = $(this);
            var height = this.scrollHeight - $this.height(); // Get the height of the div
            var scroll = $this.scrollTop(); // Get the vertical scroll position

            var isScrolledToEnd = (scroll >= height);

            $(".scroll-pos").text(scroll);
            $(".scroll-height").text(height);

            if (isScrolledToEnd) {
                var additionalContent = GetMoreContent(); // Get the additional content

                $this.append(additionalContent); // Append the additional content

            }
        });
    });

Per your comment, here is the entire HTML page source code which is working (tested under IE 9):

** Please make sure you are referencing jquery library **

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Image</title>
        <script src="assets/js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("div").scroll(function () {
                    var $this = $(this);
                    var height = this.scrollHeight - $this.height(); // Get the height of the div
                    var scroll = $this.scrollTop(); // Get the vertical scroll position

                    var isScrolledToEnd = (scroll >= height);

                    $(".scroll-pos").text(scroll);
                    $(".scroll-height").text(height);

                    if (isScrolledToEnd) {
                        var additionalContent = GetMoreContent(); // Get the additional content

                        $this.append(additionalContent); // Append the additional content

                    }
                });
            });

            function GetMoreContent() {
                return "<p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p><p>This is the div content</p>";
            }
        </script>
    </head>
        <body>
            <div style="overflow: scroll;height: 150px; border: 1px solid red;">
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
                <p>This is the div content</p>
            </div> 

            Scroll Height: <span class="scroll-height"></span>   <br/>
            Scroll position: <span class="scroll-pos"></span>   
        </body>
    </html>

0 讨论(0)

予麋鹿

2020-12-04 23:33

I think .scrollTop() is your weapon of choice. jQuery API

Get the current vertical position of the scroll bar for the first element in the set of matched elements.

So make sure to bind it to the right element. Directly on the div should work I guess.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

So probably you've to find a way to calculate the height of the div as if it would be stretched without scrollbar to put these to numbers in a meaningful relation to shoot of the loading event.

0 讨论(0)
发布评论:

提交评论
- 加载中...