JSFiddle - React, Tailwind, and code Playground

by matake

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="a">
  <div id="b">

  </div>
</div>
<button id="cargar_contenido">cargar_contenido</button>

JavaScript

$(document).ready(function() {
  //creando un texto que tenga altura para tener scroll
  var texto = '';
  for (i = 0; i < 100; i++) {
    texto += 'texto ' + i + '<br>';
  }
  //elemento que quiero añadir dinamicamente al div #b
  var contenido = $('<div id="contenedor_scrolable">' + texto + '</div>');

  //css para los contenedores #a y #b
  $('#a').css({
    border: 'solid 1px'
  });
  $('#a,#b').css({
    width: '200px',
    height: '200px'
  });

  //boton que carga el elemento de la variable contenido en el div #b
  $('#cargar_contenido').on('click', function() {
    //$('#b').html(contenido)
    $(contenido).appendTo($('#b'));

    //$('div').css('overflow','hidden');
    $('#contenedor_scrolable').css({
      width: '200px',
      height: '200px',
      'overflow': 'auto'
    });
  });
  //quiero poner acciones cuando se hace scroll en el elemento añadido dinamicamente #contenedor_scrolable
  $(document).on('scroll', '#contenedor_scrolable', function() {
    console.log('scroll moviendose');
  });

  //esto lo he puesto de prueba para ver que el click funciona pero el scroll NO
  $(document).on('click', '#contenedor_scrolable', function() {
    console.log('el click funciona');
  });
});