标签: infinite-scroll

我正在使用jQuery同位素的无限滚动插件(无限滚动),并想知道是否可以使用自定义查询参数修改路径,因为用户向下滚动页面以查看更多项目.

有没有办法访问路径并修改其中一个查询参数.第一次返回第一组项目并且之后它命中了下一页,1,2 3确定但是使用我第一次使用的相同查询参数仅更新页码.

我想在点击第3页或第4页时修改其中一个参数,如下所示:

var customPath = path + "?type=items&category=clothes&pageNumber=";

我是以错误的方式接近这个吗？

这是我的代码:

$container.infinitescroll({
    navSelector: '#page_nav', // selector for the paged navigation 
    nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
    itemSelector: '.element', // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more categories to load.',
        msgText: "<em>Loading the next set of categories...</em>",
        img: 'http://i.imgur.com/qkKy8.gif'
    },
    pathParse: function (path, nextPage) {
        var customPath = path + "?type=items&category=all&pageNumber=";
        path = [customPath, '#contaner'];
        return path;
    } …

我正在尝试在我们目前正在构建的Facebook应用程序上使用无限滚动,但由于处于iframe状态,它将无法正常工作.

是否有人为这种或类似的情况提出解决方案.

https://github.com/paulirish/infinite-scroll

我正在创建一个呈现照片墙的网页,当您向下滚动时,它使用jQuery无限滚动来加载下一批照片.

我正在使用jQuery Masonry和jQuery InfiniteScroll.

一切都在Chrome和Firefox下工作正常,但在IE下查看时,我注意到图像会随机显示失败,但如果我刷新页面,它们会出现,但其他人会丢失.同样,如果我在丢失的图像上单击鼠标右键并选择"显示图片",它会立即显示.

所以我在jQuery Masonry网站上测试了几个演示,并再次发现,在IE下,偶尔会出现随机图像.这在我的无限滚动演示中发生,有时甚至是图像演示(不使用无限滚动).

有没有其他人经历过这个,或者知道解决方案？事实上,我将无法继续我当前的项目,因为它在IE下基本上无法使用.

顺便说一句 - 我正在使用IE9.

我使用jQuery插件scrollpagination在笨我面对我的循环不会终止和阿洛斯没有给予准确的结果的问题.

这是我的HTML代码

<div id="main">
    <div id='friend_display'>
    <?php if($list->num_rows() > 0  ){
            foreach($list->result() as $show)
            {   ?>

    <div class="image-box" style="margin-left:30px" id='image-holder' >

        <div class="photo-cover">
            <a href="<?=base_url()?>uploads/user_images/<?php echo $show->user_image;?>" class="big-image"><img width="160px" height="117px" src="<?=base_url()?>uploads/user_images/friends/<?php echo $show->user_image;?>" alt="" /></a>
        </div>

        <p class="photo-name"><b><?php echo $show->user_name;?></b></p>


    </div>
    <?php } } else { echo '<div align="center" style="color:#FF0000; font-size:17px; font-weight:bold">You have no Friends yet</div>';}?>

    <div class="cl">&nbsp;</div>
</div></div>

这是脚本

  <script type="text/javascript">
  var page_num = 1; 
   $(function(){
$('#friend_display').scrollPagination({
    'contentPage': '<?=base_url()?>friends/load_more', // the url you are …

在Internet Explorer中,这一行document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML = document.getElementById("left").getElementsByTagName("tbody")[0].innerHTML + string;给了我一个SCRIPT600: Invalid target element for this operation. …character 10

字符串只是包含一组表格的字符串.这适用于Chrome,Safari或Firefox.有没有更好的方法呢？我正在做的是,一旦用户到达页面底部,我将表格附加到表格中以加载更多内容.这是一种AJAX无限滚动类型的交易 - 客户要求.我正在使用Javascript,并且更喜欢在这一点上使用Javascript而不是仅为此任务更改为jQuery.

更新也同样:document.getElementById("left").innerHTML = document.getElementById("left").innerHTML + string; 另外,左边是<table id="left">

我正在使用同位素插件(http://isotope.metafizzy.co/)和无限的ajax滚动插件(https://github.com/webcreate/infinite-ajax-scroll).无限卷轴与同位素过滤效果很好,但是,我想在应用过滤器时将更多项目加载到容器中,以便始终显示50个项目.

我有下面的代码,但我坚持用ajax加载新项目.

因此,每次选择过滤器时,我都会计算当前显示的项目数量.然后我需要一种方法来使用ajax获取更多项目并调用相同的页面(index.php).我想我需要做一些类似于无限ajax滚动插件的东西,以获得下一页的结果.我对JQuery没有经验,所以我很难弄清楚他们的代码究竟在做什么,以及如何为我的过滤实现类似的东西.

我尝试过使用$ .get但是这会在容器中加载整个index.php页面而不是仅仅获取结果.

如果有任何帮助,我将不胜感激.

<?php

require_once('config/config.php');

$cat = (isset($_GET['cat']) ? urldecode($_GET['cat']) : '');
$type = (isset($_GET['type']) ? urldecode($_GET['type']) : '');

//get filter lists
$categories = StoreDiscounts::getCategories();
$types = StoreDiscounts::getDiscountTypes();

//get total number of discounts for search
$total_items = StoreDiscounts::countitems($cat, $type);
//pagination  - infinate scrolling
$pagelimit = 50; //items per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
$start = ($page * $pagelimit) - $pagelimit;
$limit = $pagelimit * $page;

if ($total_discounts > ($page …

我正在尝试让此无限加载脚本在我的项目中工作。

这是我的HTML：

<!-- Contents -->
<div id="page-container">
  <div id="scroller">
    <div id="page_1" class="pagina"></div>
    <div id="page_2" class="pagina"></div>
    <div id="page_3" class="pagina"></div>
    <div id="page_4" class="pagina"></div>
    <div id="page_5" class="pagina"></div>
    <div id="page_6" class="pagina"></div>
  </div>
</div>

<div id="pages-to-load">
  <div id="page_7" class="pagina"></div>
  ...
  <div id="page_25" class="pagina"></div>
</div>

这是脚本：

function scrollalert(){
  var pages = document.getElementById("scroller").getElementsByTagName("div");
  var currentPageId = pages[pages.length - 1];
  //console.log("currentPageId is: "+currentPageId);
  var scrollbox = document.querySelector('#page-container');
  var scrolltop = $(window).scrollTop();
  var scrollheight = scrollbox.scrollHeight;
  var windowheight = $(window).height();
  var scrolloffset=20;
  console.log(scrolltop);
  console.log(scrollheight);
  console.log(windowheight);
  console.log(scrollheight-(windowheight+scrolloffset));
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //fetch …

我使用无限滚动js(行为设置为twitter)来加载索引页面上的新内容.我担心的是,如何重新启动对通过无限滚动加载的新帖子的动画？我已经详细描述了所遵循的页面结构,如果有人可以分享相同的解决方案,我将非常感激.

<!DOCTYPE html>
 <html lang="en">
  <head></head>
  <body>
   <div class="animsition">
    <header class="header"></header>
    <main class="main">
     <section class="main-body">
      <div id="infinite-scroll">
       <article class="post">
        <div class="post-body">
         <h2 class="post-title">
          <a href="" class="nav-link" title=""></a>
         <h2>
        </div>
       </article>
      </div>
      <div class="pagination">
       <a href="" class="next">Load Older Items</a>
      </div>
     </section>
    </main>
   <footer class="footer"></footer>  
  </div>
 </body>
</html>

这是JS,

$(".animsition").animsition({
 inClass : 'fade-in',
 outClass : 'fade-out',
 linkElement : '.nav-link',
 overlay : false
});

$(function() {
 $("#infinite-scroll").infinitescroll({ 
  navSelector: ".pagination",
  nextSelector: ".next",
  itemSelector: ".post",
  behavior: "twitter"
 },
function(newElements){

});

题:

如何使用javascript(和node.js)在Firebase中实现高效的无限滚动？

我检查了什么:

使用Firebase实现无限滚动？

问题:老火山^

使用AngularJs和Firebase进行无限滚动

代码来自: 使用AngularJs和Firebase进行无限滚动

"首先,我建议在你的Firebase中创建一个索引.对于这个答案,我创建了这个:

{
   "rules": {
      ".read": true,
      ".write": false,
      "messages": {
         ".indexOn": "id"
      }
   }
}

然后,让我们用Firebase做一些魔术:

// @fb: your Firebase.
// @data: messages, users, products... the dataset you want to do something with.
// @_start: min ID where you want to start fetching your data.
// @_end: max ID where you want to start fetching your data.
// @_n: Step size. In other words, how much data you want to fetch from …

是否有任何方法可以定位元素或某些巧妙的技巧，从而允许在DOM的顶部或底部添加或删除元素，而不影响滚动？

我尝试使用Jquery来测量添加/删除的元素的长度，然后在添加/删除元素时，立即滚动当前容器的偏移量。这成功地使我停留在当前位置，但是，我注意到，在最先影响内容然后运行后续滚动的时间间隔内，经常会出现可见的“跳跃”固定。

我认为处理此类问题的最佳方法是删除“滚动”的概念，并以某种方式手动实施，但是我不确定如何去做。任何想法都将不胜感激！