Semantic UI & ReactJS, MeteorJS, infinite scroll not calling BottomVisible () in visibility
UPDATE # 1: As per the answer below, this works in Safari, but not Chrome on MacBook Pro. UPDATE # 2: This issue is reproducible without Meteor according to the JSfiddle below w / ReactJS and Chrome. However, it NEVER works with Meteor i.e. react-packages
the Atmosphere package unless 1) puts Chrome in mobile dev mode and adds it to index.html
<meta name="viewport" content="initial-scale=1" />
Semantic UI for infinite scrolling in a ReactJS app does not call onBottomVisible()
in .visibility
. onBottomVisible
never called when scrolling to the bottom of the page.
I tried to force height
on <div className="myfeed">
, but that only calls the callback onBottomVisible()
on load, not when scrolling down.
See the code below and these JSfiddle's:
- ReactJS version: http://jsfiddle.net/2wvfjpy9/9/
- Non-referenced version: https://jsfiddle.net/4p6d7x86/12/
CSS
.myfeed {
height: 200px;
}
ReactJS / JavaScript:
var App = React.createClass({
componentDidMount: function() {
$('.myfeed').visibility({
once: false,
// update size when new content loads
observeChanges: true,
// load content on bottom edge visible
onBottomVisible: function() {
console.log("infiniateScroll ... called.");
alert("infiniateScroll ... called.");
}
});
},
render: function() {
var showFeedHTML = [];
for (var i=0; i < 20; i++) {
showFeedHTML[i] = (
<li key={ i }>
{ i }: stuff
</li>
);
}
return (
<div className="myfeed">
<h3>Semantic UI & ReactJS: Infinite Scroll Example</h3>
{ showFeedHTML }
</div>
);
}
});
React.render(<App />, document.getElementById('container'));
source to share
I got this working in Chrome on OS X by adding offset
. Only works with Chrome with a healthy offset. The required value seems to depend on how deeply the DOM element is nested.
Here's a JSfiddle update: http://jsfiddle.net/2wvfjpy9/17/
componentDidMount: function() {
$('.myfeed').visibility({
once: false,
offset: 5, // Only works on Chrome with a healthy offset.
// Value required seems to depend on how deeply
// the DOM element is nested.
// update size when new content loads
observeChanges: true,
// load content on bottom edge visible
onBottomVisible: function() {
console.log("infiniateScroll ... called.");
alert("infiniateScroll ... called.");
}
});
},
source to share
Remove the css and it works fine. I added more entries so you are not confused by the height of the JSFiddle javascript window. Edited here by JSFiddle.
var App = React.createClass({
componentDidMount: function() {
$('.myfeed').visibility({
once: false,
observeChanges: true,
onBottomVisible: function() {
console.log('infiniateScroll ... called.');
alert('inifiniateScroll ... called.');
}
});
},
render: function() {
var showFeedHTML = [];
for (var i=0; i < 100; i++) {
showFeedHTML[i] = (
<li key={ i }>
{ i }: stuff
</li>
);
}
return (
<div className="myfeed">
<h3>Semantic UI & ReactJS: Infinite Scroll Example</h3>
{ showFeedHTML }
</div>
);
}
});
React.render(<App />, document.getElementById('container'));
source to share