JavaScript动态填充的无序列表如何实现自动滚动功能？

核心问题原因 #

你原来的高度判断是在$(document).ready阶段执行，此时JSON请求还未返回，动态列表还没渲染，拿到的高度都是初始空值，自然判断不生效。

调整步骤 #

1. 先调整HTML结构，给ul加固定高度的外层滚动视口容器，不需要给ul本身预设高度：

<!-- 新增外层容器，你可以自己调整height值为实际需要的高度 -->
<div class="ulContainer" style="height: 400px; overflow: hidden;">
  <ul id="match_program" class="tg-tickets tg-tabnav ulContent" role="tablist" data-autoscroll="">
  </ul>
</div>

2. 将滚动初始化逻辑移到$.getJSON的回调末尾，所有列表项插入完成后再执行高度判断和滚动启动：

$.getJSON(sportlink_url + 'programma?gebruiklokaleteamgegevens=NEE&aantaldagen=' + programma_dagen + '&eigenwedstrijden=JA&thuis=JA&uit=JA&' + sportlink_clientID, function (uitslag) {
  const el = document.getElementById("match_program");
  // 先清空原有内容，避免重复请求叠加列表
  el.innerHTML = '';
  for (let i = 0; i < Object.keys(uitslag).length; i++) {
    // 你原来的列表项渲染逻辑保持不变
    var aanvangstijd = uitslag[i].aanvangstijd;
    var thuisteam = uitslag[i].thuisteam;
    var uitteam = uitslag[i].uitteam;
    var accommodatie = uitslag[i].accommodatie;
    var competitiesoort = uitslag[i].competitiesoort;
    var datumNumber = uitslag[i].datum.substring(0,2);
    var datumMonth = uitslag[i].datum.slice(-4);
    var datumMonthClean = datumMonth.substring(0,3);

    //Create new list item
    var node = document.createElement("li");
    node.setAttribute('role', 'presentation');

    //Create ticketDiv
    var ticketDiv = document.createElement("div");
    ticketDiv.setAttribute('class', 'tg-ticket');

    //Create timeBox
    var timeBox = document.createElement("time");
    timeBox.setAttribute('class', 'tg-matchdate');
    timeBox.innerHTML = (datumNumber + " <span>" + datumMonthClean + "</span>");

    //Create matchdetail
    var matchDetail = document.createElement("div");
    matchDetail.setAttribute('class', 'tg-matchdetail');
    matchDetail.innerHTML = ("<h4>" + thuisteam + "<span>&emsp;-&emsp;</span>" + uitteam + " &emsp; | &emsp; " + aanvangstijd + ", " + accommodatie);

    //Create themeTag
    var themeTag = document.createElement("span");
    themeTag.setAttribute('class', 'tg-theme-tag');
    themeTag.innerHTML = (competitiesoort);

    //Build the hole thing
    ticketDiv.appendChild(timeBox);
    matchDetail.appendChild(themeTag);
    ticketDiv.appendChild(matchDetail)
    node.appendChild(ticketDiv);
    el.appendChild(node);
  }
  // 所有列表渲染完成后，初始化滚动逻辑
  initAutoScroll();
});

3. 替换原有滚动相关代码，补全完整的滚动逻辑，新增定时器防重复处理：

// 全局存储定时器ID，避免重复启动
let scrollTimer = null;

function initAutoScroll() {
  // 先清除原有定时器，避免重复请求产生多个定时器
  if (scrollTimer) clearInterval(scrollTimer);
  
  const $container = $('.ulContainer');
  const $content = $('.ulContent');
  // 渲染完成后再取高度，此时值是准确的
  if ($content.height() <= $container.height()) return;

  let scrollDirection = 'down';
  scrollTimer = setInterval(() => {
    animateContent(scrollDirection);
    // 滚动到底后切换方向，或者直接复位回顶部，可根据需求调整
    scrollDirection = scrollDirection === 'down' ? 'up' : 'down';
  }, 3000);
}

function animateContent(direction) {
  const $container = $('.ulContainer');
  const $content = $('.ulContent');
  const animationOffset = $container.height() - $content.height();
  const targetOffset = direction === 'up' ? 0 : animationOffset;
  
  $content.stop().animate({
    marginTop: targetOffset + 'px'
  }, 1000); // 滚动动画时长1s，可自行调整
}

4. 可删除原来写在$(document).ready里的滚动判断逻辑，已经不需要。

内容的提问来源于stack exchange，提问作者PatrickStel