如何用JQuery实现点击按钮弹窗、AJAX加载TAB分类数据并滚动到底部自动翻页？

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  .tab_p { display: flex; }
  .tab_item { height: 300px; overflow: auto; }
  .tab_item img { height: 50px; object-fit: cover; }
</style>
<div class="btn">点击我弹窗并加载分类1数据</div>
<div class="tab_p">
  <p data-id="1">分类1</p>
  <p data-id="2">分类2</p>
  <p data-id="3">分类3</p>
</div>
<div class="tab_content">
  <div class="tab_item">
    <!-- 分类内容加载区 -->
  </div>
</div>

let categoryId = 1, currentPage = 1, total = 0;
let isLoading = false;

$(document).on('click', '.btn', function() {
  loadCategoryData(categoryId, currentPage);
});

$('.tab_p p').click(function() {
  currentPage = 1;
  categoryId = $(this).data('id');
  loadCategoryData(categoryId, currentPage);
});

function loadCategoryData(id, page) {
  $(".tab_item").html('加载中...');
  loadPageData(id, page);
}

$('.tab_item').scroll(function() {
  if (isLoading) return;
  const scrollTop = $(this).scrollTop();
  const scrollHeight = $(this).prop('scrollHeight');
  const containerHeight = $(this).outerHeight();

  if (scrollHeight - scrollTop - containerHeight < 150) {
    currentPage++;
    if (currentPage <= total) {
      loadPageData(categoryId, currentPage);
    }
  }
});

function getData(categoryId, page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const list = [];
      for (let i = 0; i < 20; i++) {
        list.push({
          title: `分类:${categoryId},标题:${i}`,
          img_url: `https://picsum.photos/200/300?random=${i}`
        });
      }
      resolve({ list, page, totalPages: 100 }); // 模拟后端返回数据
    }, 1000);
  });
}

function loadPageData(categoryId, page) {
  if (isLoading) return;
  isLoading = true;
  getData(categoryId, page).then(({ list, page, totalPages }) => {
    total = totalPages;
    let html = "";
    list.forEach(item => {
      html += `<div>@@##@@${item.title}</div>`;
    });
    $(".tab_item").append(html);
  }).finally(() => {
    isLoading = false;
  });
}