如果我放大浏览器，无限滚动停止 [英] infinite scrolling stops if I zoom my browser
问题描述
我有一个无限滚动的页面，当用户浏览器的缩放比例为100％时可以正常工作。如果用户在页面上放大或缩小（即100％以外的任何值），滚动最终会中断，页面将停止检索记录，即使还有更多的记录。
我该如何解决这个问题？
<！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =en>
< head>
< title>< / title>
< script type =text / javascriptsrc =../../ 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） （html）{
$（＃postswrapper）。append（html）;
$ （'div＃loadmoreajaxloader'）。hide（）;
} else {
$（'div＃loadmoreajaxloader'）。html（'< center> That \'s 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\\\
。'< div class = postitemid ='。$ counter。'> Post no'。$ counter。'< / div>';
}
？>
< / div>
< div id =loadmoreajaxloaderstyle =display：none;>< center>< img src =ajax-loader.gif/>< / center>< / div> ;
< / div>
< / div>
< / body>
< / html>
这里是test2.php：
<$ p $ （$ set（$ _ GET ['lastid']））{
$ counter = addslashes（$ _ GET ['lastid']）+ 1;
$ total = $ counter + 25;
for（$ counter; $ counter <= $ total; $ counter + = 1）{
echo\\\
。'< div class =postitemid ='。$ counter'> Post no'。$ counter。'< / div>';
}
}
？>
可能的解决方案
只要确定，
查看这个链接，看看这个解决方案是否会对你有所帮助。它会检查你何时点击滚动底部。
< div id =boxstyle =height：300px; overflow：auto;>
< div class =inner>
<！ - 您的内容在这里 - >
< / div>
< / div>
var elem = $（ '＃框'）;
var inner = $（'＃box> .inner'）;
if（Math.abs（inner.offset（）。top）+ elem.height（）+ elem.offset（）。top> = inner.outerHeight（））{
//我们'在底部！
$ / code>
检查缩放比例 h2>
嗯，如果这不起作用，我建议你看看。
他们讨论了如何检测不同浏览器中的缩放量。
您可以从那里更正您的代码，以确定滚动结束时的缩放比例。
无限滚动插件
除此之外，我建议您查看一些管理无限滚动的替代插件
Like
我大概可以列出其他几个，但只是做一个谷歌搜索比较容易，其中有很多。 / p>
愉快的编码和祝你好运！ ：）
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>';
}
}
?>
解决方案 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!
<div id="box" style="height:300px; overflow:auto;">
<div class="inner">
<!-- Your content goes here -->
</div>
</div>
var elem = $('#box');
var inner = $('#box > .inner');
if ( Math.abs(inner.offset().top) + elem.height() + elem.offset().top >= inner.outerHeight() ) {
// We're at the bottom!
}
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! :)
这篇关于如果我放大浏览器，无限滚动停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
