Questions tagged «infinite-scroll»

我们的应用程序使用无限滚动来浏览大量异构项目列表。有一些皱纹： 对于我们的用户来说，通常有10,000个项目的列表，并且需要滚动3k +。 这些都是丰富的项目，因此在浏览器性能变得无法接受之前，我们只能在DOM中拥有几百个。 这些物品的高度各不相同。 这些项目可能包含图像，我们允许用户跳转到特定日期。这很棘手，因为用户可以跳到列表中需要在视口上方加载图像的位置，这会在加载时将内容下推。无法处理意味着用户可能会跳到某个日期，但是随后又被转移到了更早的日期。 已知的不完整解决方案： （react-infinite-scroll）-这只是一个简单的“当我们触底时加载更多”组件。它不会剔除任何DOM，因此它将死于数千个项目上。 （带有React的滚动位置）-显示在顶部插入或底部插入（而不是同时插入）时如何存储和恢复滚动位置。 我不是在寻找完整解决方案的代码（尽管那会很棒）。相反，我正在寻找“ React Way”来为这种情况建模。滚动位置是否处于状态？我应该跟踪什么状态以保留我在列表中的位置？我需要保持什么状态，以便在滚动到渲染内容的底部或顶部附近时触发新的渲染？

114 javascript  html  infinite-scroll  reactjs 

我正在寻找使用React实现无限滚动的方法。我遇到了react-infinite-scroll，发现它效率低下，因为它只是将节点添加到DOM中，而不会删除它们。React是否有经过验证的解决方案，可以添加，删除和维护DOM中恒定数量的节点。 这是jsfiddle问题。在这个问题中，我想一次只在DOM中包含50个元素。当用户上下滚动时，应加载和删除其他对象。由于其优化算法，我们已经开始使用React。现在我找不到解决此问题的方法。我遇到过airbnb Infinite js。但这是用Jquery实现的。要使用这个airbnb无限滚动，我必须放弃我不想做的React优化。 我想添加滚动的示例代码是（这里我正在加载所有项目。我的目标是一次仅加载50个项目） /** @jsx React.DOM */ var Hello = React.createClass({ render: function() { return (<li>Hello {this.props.name}</li>); } }); var HelloList = React.createClass({ getInitialState: function() { var numbers = []; for(var i=1;i<10000;i++){ numbers.push(i); } return {data:numbers}; }, render: function(){ var response = this.state.data.map(function(contact){ return (<Hello name="World"></Hello>); }); return …

89 javascript  html  infinite-scroll  reactjs 

我正在尝试用Coldfusion开发的网站上设置无限滚动，我是javascript和jquery的新手，所以我在解决所有这些问题时遇到了一些问题。为了使用无限滚动插件，我是否需要在网站上进行分页，或者有没有办法做到这一点？

72 javascript  jquery  css  infinite-scroll  jquery-infinite-scroll