JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="main" style="height: 200000px;">
  <ul style="position: fixed">
    <li al-repeat="i in 50">
      <label>
        <input al-checked="data[i+shift]" type="checkbox" />{{i + shift}}      
      </label>
    </li>
  </ul>
  

</div>

JavaScript

alight.debug.scan=true;
function main(scope) {
	scope.shift = 0;
  scope.data = [];
	scope.onChange = function(i) {
  	console.log(e.target.id, e.target.checked);
  }
  document.addEventListener('scroll', function(e) {
  	scope.shift = Math.floor(document.body.scrollTop/10);
    scope.$scan();
  })
};