首页 > 解决方案 > 请告诉我为什么我的 $(window).scrolltop() 不适用于所有浏览器

问题描述

<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
   if(($(window).scrollTop() == $(document).height() - $(window).height()) 
    && (lastID != 0)){
        $.ajax({
            url:"main_feed_ajax.php",
            method:"POST",
            data:'feed_id='+lastID,
            cache:false,
            beforeSend:function(){
                $('.load-more').show();
            },
            success:function(html){
                $('.load-more').remove();
                $('#postList').append(html);
            }
        });
    }
  }); 
 });
</script>

我有此代码用于在不刷新页面的情况下加载滚动数据。我的代码仅适用于少数几个浏览器。此外,它不适用于使用 google chrome、firefox 的移动设备和平板电脑。只有它适用于 Internet Explorer 和一些 chrome 浏览器。所以,请建议我在此代码中需要更改的内容。Index.php 页面

<div id="postList">
<?php
// Include the database configuration file
require 'dbConfig.php';

// Get records from the database
$query = $db->query("SELECT * FROM user_post ORDER BY feed_id DESC LIMIT 
5");

if($query->num_rows > 0){ 
 while($row = $query->fetch_assoc()){
    $postID = $row["feed_id"];
    $feed_text = $row["feed_text"];
?>
<div class="list-item"><h4><?php echo $feed_text; ?></h4><img 
style="width:200px; height:200px;" src="car.jpg"></div>

<?php } ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display: 
none;">
    <img src="loader.gif"/>
</div>
<?php } ?>
</div>

main_feed_ajax.php 页面

<?php
if(!empty($_POST["feed_id"])){
//Include DB configuration file
$server_access_name="localhost";
$server_access_id="root";
$server_access_pass_code="";
$server_access_batabase_name="inkme"; 

// Create connection
$conn_server_link = mysqli_connect($server_access_name, $server_access_id, 
$server_access_pass_code, $server_access_batabase_name);
if(!$conn_server_link){
echo "!Ops, Unable to connect ";
}
//Get last ID
$lastID = $_POST['feed_id'];

//Limit on data display
$showLimit = 5;

//Get all rows except already displayed
$queryAll = $conn_server_link->query("SELECT COUNT(*) as num_rows FROM 
user_post WHERE feed_id < ".$lastID." ORDER BY feed_id DESC");
$rowAll = $queryAll->fetch_assoc();
$allNumRows = $rowAll['num_rows'];

//Get rows by limit except already displayed
$query = $conn_server_link->query("SELECT * FROM user_post WHERE feed_id < 
".$lastID." ORDER BY feed_id DESC LIMIT ".$showLimit);
 if($query->num_rows > 0){
 while($row = $query->fetch_assoc()){ 
    $postID = $row["feed_id"]; 
    $feed_text = $row["feed_text"]; 
    ?>


<div class="list-item"><h4><?php echo $feed_text; ?></h4><img 
style="width:200px; height:200px;" src="car.jpg"></div>
<?php } ?>
<?php if($allNumRows > $showLimit){ ?>
<div class="load-more" lastID="<?php echo $postID; ?>" style="display: 
none;">
    <img src="loader.gif"/>
</div>
<?php }else{ ?>
<div class="load-more" lastID="0">
   No more feeds
</div>
<?php }
}
else{ ?>
<div class="load-more" lastID="0">
    That's All!
</div>
<?php
}
}
?>

标签: javascriptjqueryajax

解决方案


推荐阅读