js实现滚动选择器

<div class="scroll-container" id="scrollContainer">
  <div>选项 1</div>
  <div>选项 2</div>
  <div>选项 3</div>
  <!-- 更多选项 -->
</div>

.scroll-container {
  width: 200px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow-y: auto; /* 当内容超出容器高度时，启用垂直滚动 */
  border: 1px solid #ccc; /* 可选：添加边框以便观察 */
}

const scrollContainer = document.getElementById('scrollContainer');

function loadOptions(count) {
  for (let i = 0; i < count; i++) {
    const option = document.createElement('div');
    option.textContent = `选项 ${scrollContainer.children.length + 1}`;
    scrollContainer.appendChild(option);
  }
}

// 初始加载10个选项
loadOptions(10);

// 监听滚动到底部事件，实现无限滚动
scrollContainer.addEventListener('scroll', () => {
  if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
    // 当滚动到底部时，加载更多选项
    loadOptions(10);
  }
});