语义 UI 和 ReactJS、Meteor JS、无限滚动未在可见性中调用 onBottomVisible()答案

【问题标题】：Semantic UI & ReactJS, MeteorJS, infinite scroll not calling onBottomVisible() in visibility语义 UI 和 ReactJS、Meteor JS、无限滚动未在可见性中调用 onBottomVisible()
【发布时间】：2015-11-01 05:23:58
【问题描述】：

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

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

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

我尝试将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'));

【问题讨论】：

标签： meteor reactjs infinite-scroll semantic-ui

【解决方案1】：

删除 css 就可以了。我添加了更多记录，这样您就不会对 JSFiddle javascript 窗口的高度感到困惑。 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'));

【讨论】：

这仍然没有触发onBottomVisible()，顺便说一句，这是有效的JSfiddle链接，你的有https，需要只是http：jsfiddle.net/q17w57ca
@GiantElk 它对我来说很好用。快速录屏here
感谢录屏。这适用于我的 Safari 浏览器，但不是在 Chrome 中，在 MacBook Pro 上。知道为什么吗？我猜 Semantic UI 需要调整他们的 .visibility 代码以实现跨浏览器兼容性。或者它可能是实际 JSFiddle 中的 jQuery 版本。
这个 JSfiddle 拥有所有依赖项、jQuery、React、语义 UI 的最新版本。仍然无法在 Chrome 中工作。奇怪的是非 React 版本在 Chrome 中可以工作：jsfiddle.net/q17w57ca/6
为什么不在你的 React 应用中试试呢？

【解决方案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.");    
      }
    });
},

【讨论】：