JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<h2 class="ui dividing header">
    Semantic UI - Visibility
    <div class="sub header">Infinite scroll inside modal not working</div>
</h2>

<button id="show-modal-btn" class="ui button">
  Show Modal
</button>

<div class="ui modal">
  <div class="header">Header</div>
  <div class="content">
    <div id="items-holder">
      <div id="items">
      
      </div>      
    </div>
  </div>
</div>

CSS

body {
    padding: 1em;
}

#items-holder {
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}

JavaScript

$('#show-modal-btn').click(function(){
	$('.ui.modal').modal({
  	onVisible: function() {
    	let context = $('#items-holder')
			console.log('@@@', context)
      let pane = $('#items')
    	loadContents()
      pane.visibility({
      	once:false,
      	context: context,
        observeChanges: true,
        onBottomVisible: function() {
        	console.log('Yes!!')
          //loadContents()
        },
        onUpdate(e) {
        	if (pane.height() - context.scrollTop() <= context.height()) loadContents()
        }
      })
    }
  }).modal('show')  
})

function loadContents() {
	for (i=0; i<25; i++) {
		$('.ui.modal #items').append(`<div>${i}==================================================================</div>`)
  }
}