Semantic UI和ReactJS，MeteorJS，无限滚动不在visibility中调用onBottomVisible()

Question

更新 #1：根据下面的答案，在 MacBook Pro 上，这在 Safari 中有效但在 Chrome 中无效。 更新 #2：这个问题可以通过下面的 JSfiddle 和 Chrome 与 ReactJS 复现。然而，除非将 Chrome 放入开发工具移动设备模式并将其添加到 index.html，否则它永远不会在 Meteor（即 react-packages Atmosphere 包）中起作用。

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

在ReactJS应用程序中使用Semantic UI的无限滚动时，onBottomVisible()没有被调用。当滚动到页面底部时，onBottomVisible从未被调用。

我尝试将<div className="myfeed">强制设置为height，但这只会在加载时触发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'));

- Giant Elk

Answer 1

移除CSS后，它可以正常工作。我已经添加了更多的记录，这样你就不会被JSFiddle JavaScript窗口的高度所困扰。在这里编辑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'));

- knowbody

---

@GiantElk，对我来说它运行良好。我快速录制了一个屏幕录像在这里。 - knowbody

感谢您的屏幕录制。这在我的Safari浏览器中可以工作，但在MacBook Pro上的Chrome浏览器中无法工作。有什么想法吗？我猜Semantic UI需要调整他们的.visibility代码以实现跨浏览器兼容性。或者可能是JSFiddle中实际jQuery版本的问题。 - Giant Elk

奇怪，你用的是哪个版本的Chrome？我用的是版本44.0.2403.130。 - knowbody

为什么不在你的React应用程序中尝试一下呢？ - knowbody

这是一个 Github 仓库和 bug 描述链接：https://github.com/giantelk/react-meteor-infinite-scroll-semantic-ui - Giant Elk

Answer 2

我在 OS X 上的 Chrome 中添加了 offset，使其正常工作。只有在偏移量正确的情况下才能在 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.");    
      }
    });
},

- Giant Elk