如果我缩放浏览器，无限滚动就会停止
我有一个无限滚动的页面，当用户浏览器的缩放比例为 100% 时，该页面可以正常工作。如果用户放大或缩小页面（即 100% 以外的任何内容），滚动最终会中断，页面将停止检索记录，即使还有更多记录可供获取。
我该如何纠正这个问题？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$('div#loadmoreajaxloader').show();
$.ajax({
url: "test2.php?lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>That\'s the Last One!</center>');
}
}
});
}
});
</script>
<style>
.postitem{
font-size: 16px;
padding: 5px 0 15px 0;
}
</style>
</head>
<body>
<div id="hycucdemosbody">
<div id="wrapper">
<div id="postswrapper">
<?php
for($counter=0; $counter <= 50; $counter += 1){
echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';
}
?>
</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif"/></center></div>
</div>
</div>
</body>
</html>
这是 test2.php：
<?php
if(isset($_GET['lastid'])){
$counter=addslashes($_GET['lastid']) + 1;
$total=$counter+25;
for($counter; $counter <= $total; $counter += 1){
echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';
}
}
?>
I've got a page with infinite scrolling that works fine when the user's browser's zoom is at 100%. If the user zooms in on the page or zooms out (ie anything other than 100%) the scrolling eventually breaks and the page will stop retrieving records, even though there are many more to get.
How do I correct that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
$('div#loadmoreajaxloader').show();
$.ajax({
url: "test2.php?lastid=" + $(".postitem:last").attr("id"),
success: function(html){
if(html){
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else{
$('div#loadmoreajaxloader').html('<center>That\'s the Last One!</center>');
}
}
});
}
});
</script>
<style>
.postitem{
font-size: 16px;
padding: 5px 0 15px 0;
}
</style>
</head>
<body>
<div id="hycucdemosbody">
<div id="wrapper">
<div id="postswrapper">
<?php
for($counter=0; $counter <= 50; $counter += 1){
echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';
}
?>
</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif"/></center></div>
</div>
</div>
</body>
</html>
here's test2.php:
<?php
if(isset($_GET['lastid'])){
$counter=addslashes($_GET['lastid']) + 1;
$total=$counter+25;
for($counter; $counter <= $total; $counter += 1){
echo "\n".'<div class="postitem" id="'.$counter.'">Post no '.$counter.'</div>';
}
}
?>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可能的解决方案
只是为了确保，
查看 此链接< /a>，看看该解决方案是否可以为您带来更好的帮助。它会检查您何时到达滚动底部。真的很准确！
检查缩放比例
嗯，如果这不起作用，我建议您查看 这个问题&回答。
他们讨论了如何检测不同浏览器中的缩放量。
您可以从那里更正您的代码，以在确定滚动结束时考虑缩放。
无限滚动插件
除此之外，我建议您研究一些管理无限滚动的替代插件
就像
我可能会列出其他一些，但进行谷歌搜索会更容易，他们有很多。
快乐编码，祝你好运！ :)
Possible solution
Just to make sure,
Check out this link, and see if that solution might do you any better. It checks when you've hit the bottom of the scroll. It's really accurate!
Checking zoom ratio
Hm, if that doesn't work, I'd suggest you take a look at this question & answer.
They discuss how to detect the amount of zoom in different browsers.
You can, from there, correct your code to account for the zoom when determining the end of scroll.
Infinite scroll plugins
Other than that, I'd suggest you look into some of the alternative plugins that manage infinite scrolling
Like
I could probably list a few others, but it's easier just to do a google search, there are so many of them.
Happy coding and good luck! :)
放大时，
jQuery(window).scrollTop() 和 jQuery(window).height() 之和比 jQuery(document).height() 低 0.75。
所以我添加 2
希望它对你有用
when zoom in,
and the sum of jQuery(window).scrollTop() and jQuery(window).height() is 0.75 lower than jQuery(document).height().
So I add 2
Hope it works for you