标签: infinite-scroll

我在这里使用cody sherman的javascript代码:http://codysherman.com/tools/infinite-scrolling/code

我还使用一个简单的jquery脚本来动态更改包含tumblr帖子的div的背景图像.

jquery代码工作正常但我需要一种方法来在无限滚动脚本用新帖子更新时再次调用该函数.我猜他们互相交谈的方式.

你可以在这里看到这个页面:http://hypergeography.tumblr.com/ (它还没有使用无限滚动.但它确实有改变背景图像的脚本.)

任何帮助,将不胜感激.

我正在尝试在我的项目上实现无限滚动.我正在使用Railscast #114 Endless Page和它的混合.

当我尝试在页面结束时停止发送请求时,除了奇怪的行为之外,一切正常.

到目前为止,我有:

控制器:

def show
    @title = Photoset.find(params[:id]).name
    @photos = Photoset.find(params[:id]).photo.paginate(:page => params[:page], :per_page => 20)
    respond_to do |format|
      format.js
      format.html
    end
end

Show.html.erb:

<% content_for :body_class, '' %>
<%= render 'shared/header' %>
<div id="photos_container">
    <div id="photos_header">
    <h2><%= @title %></h2>
    </div>
    <%= render :partial => 'photo', :collection => @photos %>
</div>
<%= render :partial => 'endless_scroll' %>

Javascript(通过部分加载):

<script type="text/javascript">
(function() {
  var page = 1,
  loading = false,
  finish = false;

  function …

我使用砌体插件找到了无限滚动的演示.

http://www.jquery4u.com/demos/infinite-scrolling-demo1/

我想要做的是将滚动条放在容器div上.所以身体会保持静止.

这可能吗？如果您需要我进一步解释,请告诉我.

谢谢

我在这里设置了一个快速小提琴.我想要的是能够无限滚动到左边或右边(旋转木马风格)并且只重复元素(即'脱落'右边缘并重新出现在左边,反之亦然).我能够捕捉到我在滚动中的位置,但不确定在那之后最好的方法是什么.在我尝试动态移动元素的路线之前,在我看来有一个非常简单的技巧.

CSS

#main {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

HTML

<div id="main">
    <img src="http://dummyimage.com/150x100/aaa/00f">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/ccc/f00">
</div>

JS

$('#main').scroll(function (event) {
    var width = $(this)[0].scrollWidth - $(this).width();
    console.log('location: ' + $(this).scrollLeft() + ' out of ' + width);
});?

我正在尝试使用will_paginate用于Rails 3.2应用程序,并且我没有看到任何引用,当有人在分页时数据库中的数据被更改时会发生什么.更具体地说,添加了新记录.

我可能会在这里遗漏一些东西,但如果我知道它是如何工作的,will_paginate只会计算数据库中的记录.假设我一次加载一个包含5条记录的页面,并希望它们按最新的顺序排序.用户加载页面并获取在第1页显示的记录6-10(当时的最新记录).然后,有人在表中插入另一条记录,id = 11.之后,第一个用户点击进入第2页,但现在第2页给出了记录2-6.因此,用户在两个页面中都获得了id = 6.

这个问题听起来并不坏,但它是非常糟糕的,如果你想使用will_paginate分页对于无限滚动如下所示:http://railscasts.com/episodes/114-endless-page

我考虑添加第一页加载的时间戳并将其传递给连续的ajax调用以过滤首先出现的记录,以便不获取重复项.

是否有一些最佳实践方法来处理这个问题？

我在将Wordpress中的无限滚动插件与使用砌体的主题集成时遇到了一个令人讨厌的问题.

我有无限滚动的最新版本2.6.2,我在插件的回调部分添加了这段代码:

// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
});

但它不起作用,它增加了对新元素的不透明度,但它没有添加位置等,所以不太有效; 新产品将在旧产品的页面顶部显示.

脚本看起来像:

/* <![CDATA[ /
var infinite_scroll = "{\"loading\":{\"msgText\":\"Loading...<\\/em>\",\"finishedMsg\":\"No additional products.<\\/em>\",\"img\":\"http:\\/\\/www.test.com\\\/wp-content\\\/plugins\\\/infinite-scroll\\\/img\\\/ajax-loader.gif\"},\"nextSelector\":\".next\",\"navSelector\":\".woo-pagination\",\"itemSelector\":\"li.product\",\"contentSelector\":\"ul.products\",\"debug\":false,\"behavior\":\"\",\"callback\":\"\\\/\\\/ hide new items while they are loading\r\nvar $newElems = jQuery(newElements).css({ opacity: 0 });\r\n\\/\\/ ensure that images load before adding to masonry layout\r\n$newElems.imagesLoaded(function(){\r\n\\/\\/ show elems …

我正在尝试学习编码Tumblr主题（我没有钱买Wordpress），我想弄清楚如何实现帖子的“无限/无穷滚动”（与分页相反）；我宁愿不使用2个主要的无限滚动脚本中的任何一个，因为infinite-scroll-js（由Paul Irish 编写）的文档相当齐全（我能够使其正常工作），但是我希望对帖子的加载方式进行更多控制，因此说话，而且科迪·谢尔曼（Cody Sherman）的无限滚动代码完全没有记录，而且我也不知道应如何使用（各种各样的指令是由几位非编码人员分发的，他们对Javascript的了解少于我，这是在说些什么） 。

我不了解任何Ajax，但是我愿意根据需要阅读尽可能多的JS文档。突然添加帖子时，可以使用以下顺序吗？还是需要像Paul Irish这样理解Ajax？

上载：（身体）

1. 获取所有.post元素（带有子元素），将它们从DOM中删除，同时将其添加到基本上只是帖子列表（数组或JS术语？）的var中

2. 加载一些计算出的帖子数（可能会有一种算法，可能基于帖子的高度或某些东西，或者在它们到达时进行动态测量）/当用户滚动到底部时，将它们添加到动画的Masonry容器中页面，正文或砌体容器（尚未决定哪一个）

这是合理的还是我会浪费时间？

我按照这里的教程http://railsforbeginners.com/chapters/chapter-9-infinite-scroll/进行无限滚动.代码在本地运行良好,但是当我将其部署到prod时.分页链接(1 2 3 4)仍然显示,无限滚动不会触发.我也尝试添加这些文件但assets.rb没有成功

首先我正在使用Rails 4,我application.js看起来像这样

//= require jquery2
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui.min
//= require bootstrap-hover-dropdown.min
//= require bootstrap.min
//= require select2
//= require infinite_scroll
//= require turbolinks

Controller action

respond_to do |format|
      format.html
      format.js { render "visitors/index" }
end

index.js.erb

$('#my-articles').append('<%= j render @articles %>');
<% if @articles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @articles %>');
add_tweets();
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>



function add_tweets(){
  <% …

如何在两个方向上,向上和向下进行无限滚动.我使用的是InfiniteLoader和List,两者都是反应虚拟化的组件.我有一个带有初始日期时间范围的时间戳列表.从那里列表应该在两个方向上是无限的.目前,向下滚动到List的底部将触发函数_loadMoreRows().但是,我想在向上滚动时触发具有相同功能的_loadMoreRows().

我有一个网页无限滚动的网站，上面列出了最新的广告。用户点击广告预览时，会将其重定向到产品页面。

但是当用户单击后退按钮时，它无法恢复滚动位置。

注意1：滚动结束时，我将加载10个广告。假设我们已经加载了约50个广告，并且用户更改了页面。当点击后退按钮时，它将重新加载为空的主页，然后仅加载前10个广告。

注2：我正在使用react js和react-router并已经尝试在社区中找到解决方案。由于最近chrome支持滚动恢复，因此他们并没有做太多事情。但是Chrome不支持无​​限滚动。