语义 UI & ReactJS、MeteorJS、无限滚动不在可见性中调用 onBottomVisible()

Question

更新 #1：根据下面的答案，这在 Safari 中有效，但在 MacBook Pro 上无效 Chrome。更新 #2：根据下面的 JSfiddle w/ReactJS 和 Chrome，这个问题在没有 Meteor 的情况下是可重现的。然而，它永远不能与 Meteor 一起使用，即 react-packages Atmosphere 包，除非 1) 将 Chrome 放入开发工具移动设备模式并将其添加到 index.html

<meta name="viewport" content="initial-scale=1" />

ReactJS 应用中的语义 UI 无限滚动未调用 .visibility 中的 onBottomVisible()。 onBottomVisible 滚动到页面底部时永远不会调用 get。

我尝试将 height 强加到 <div className="myfeed"> 上，但这只会在加载时触发 onBottomVisible() 回调，而不会在滚动到底部时触发。

查看下面的代码和这些 JSfiddle 的：

ReactJS 版本：http://jsfiddle.net/2wvfjpy9/9/
非 React 版本：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'));

Answer 1

删除 css，它工作得很好。我添加了更多记录，因此您不会对 JSFiddle javascript window 的高度感到困惑。 Here 编辑了 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'));

Answer 2

我通过添加 offset 在 OS X 上的 Chrome 中实现了这个功能。仅适用于具有健康偏移的 Chrome。所需的值似乎取决于 DOM 元素的嵌套深度。

这是 JSfiddle 的更新：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.");    
      }
    });
},

语义 UI & ReactJS、MeteorJS、无限滚动不在可见性中调用 onBottomVisible()

Semantic UI & ReactJS, MeteorJS, infinite scroll not calling onBottomVisible() in visibility

infinite-scroll

meteor

reactjs

semantic-ui