Question

好的就是这件事，最近我找到了一个脚本，当用户向下滚动时自动加载更多数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Loading Records</title>
<style>
body,td,th {font-family: Georgia, Times New Roman, Times, serif;font-size: 14px; background:#efefef; padding:0; margin:0;}
.animation_image {background: #fff;padding: 10px;width: 500px;margin-right: auto;margin-left: auto;}
#results{width: 500px; margin:0 0 0 17px; padding-bottom: 20px; }
#results ol{margin: 0px;padding: 0px;}
#results li{margin: 10px 0px; padding: 10px 0px;  border-bottom:1px dotted #999; }
.container {
    position: relative;
    height: 600px;
    width: 600px;
    overflow: auto;
    margin:0 auto;
    background:#fff;
    margin-top: 30px;
    border:1px solid #ddd;
}

.content {
    position: relative;
    height: auto; /* height just added for illustrative purposes */
    width: 550px;
    background:#fff;
}
</style>
</head>

<body>

<div id="container" class="container">
    <div class="content">
        <ol id="results"></ol>
        <div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>
    </div>
</div>

<script type="text/javascript" src="js/jquery-min.1.10.2.js"></script>
<?php
include("config.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM paginate");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close(); 
?>
<script type="text/javascript">
$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)
    $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
    $('#container').scroll( function() {
        var fromtop = $(this).scrollTop(),
        height = $(this).find('.content').innerHeight() - $(this).innerHeight();

        if ((height - fromtop) < 50) {
           if(track_load <= total_groups && loading==false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                $('.animation_image').show(); //show loading image

                //load data from the server using a HTTP POST request
                $.post('autoload_process.php',{'group_no': track_load}, function(data){

                    $("#results").append(data); //append received data into the element

                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received

                    track_load++; //loaded group increment
                    loading = false; 

                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;
                });
            }
        }
    });
});
</script>

</body>
</html>

它的工作正常。但是，当我尝试实现jScrollPane使滚动条更平滑时，此脚本无法正常工作。有谁可以帮助我？

Answer 1

我想发表评论，但似乎我的声誉不够高。因此，回复。

我看了一下jScrollPane，好像它听了＆＃34;滚动＆＃34;鼠标事件和使用window.scrollBy滚动并导致jQuery的.scroll不会触发。虽然我无法保证这就是为什么它不会被解雇（我假设这就是你的代码无法工作的原因），因为我对javascript的了解非常有限。

更换

$(element).scroll(function () {});

带

$(element).on('mousewheel DOMMouseScroll', function() {});

应该修复它。我认为......为什么会这样，你可能应该问别人，因为我只会引起混淆。

jScrollPane自动加载更多数据

1 个答案: