使用语义 UI 的可见性在溢出 div 中无限滚动

Question

我想使用 Infinite Scrolling using the Semantic UI Visibility Behavior 但在 overflow-y: auto div 内而不是整个页面。这是我的代码的简化版本：

HTML

<div id="myDiv">
  <!-- lots of lines of content -->
  <p class="myElementWithinDiv">Alert should appear when this is visible</p>
</div>

CSS

#myDiv {
  height: 200px;
  overflow-y: auto;
}

JQuery

$('.myElementWithinTheDiv')
    .visibility({
        once: false,
        observeChanges: true,
        onTopVisible: function() {
            console.log('top visible');
        }
});

JSFiddle 的上述工作没有 CSS 限制 DIV 高度：https://jsfiddle.net/jtge3s2o/

上面的JSFiddle 不工作 with CSS 限制DIV身高：https://jsfiddle.net/wznxkef2/2/

有没有办法让 div 设置为固定高度？

Answer 1

根据Behavior's Settings上下文可以设置如下：

$('.myElementWithinTheDiv')
    .visibility({
        once: false,
        context: document.getElementById('myDiv'),
        observeChanges: true,
        onTopVisible: function() {
            console.log('top visible');
        }
});

使用语义 UI 的可见性在溢出 div 中无限滚动

Use Semantic UI's Visibility for infinite scrolling within an overflowing div

semantic-ui