当前位置：首页 > JavaScript

JS实现日期滚动选择

2026-03-01 18:06:32JavaScript

实现日期滚动选择的核心思路

使用HTML和CSS构建一个滚动容器，包含年、月、日的可滚动列表。通过JavaScript监听滚动事件，计算当前选中的值并更新显示。

HTML结构示例

<div class="date-picker">
  <div class="scroll-container" id="year-scroll"></div>
  <div class="scroll-container" id="month-scroll"></div>
  <div class="scroll-container" id="day-scroll"></div>
</div>

CSS样式设计

.date-picker {
  display: flex;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.scroll-container {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroll-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
}

JavaScript实现逻辑

初始化滚动容器并填充日期数据：

function initDatePicker() {
  const years = generateYears(1900, 2100);
  const months = Array.from({length:12}, (_,i) => i+1);
  const days = Array.from({length:31}, (_,i) => i+1);

  populateScroll('year-scroll', years);
  populateScroll('month-scroll', months);
  populateScroll('day-scroll', days);
}

function populateScroll(id, data) {
  const container = document.getElementById(id);
  data.forEach(item => {
    const div = document.createElement('div');
    div.className = 'scroll-item';
    div.textContent = item;
    container.appendChild(div);
  });
}

添加滚动事件监听：

function setupScrollListeners() {
  const containers = document.querySelectorAll('.scroll-container');
  containers.forEach(container => {
    container.addEventListener('scroll', debounce(handleScroll, 100));
  });
}

function handleScroll(e) {
  const container = e.target;
  const items = container.querySelectorAll('.scroll-item');
  const containerRect = container.getBoundingClientRect();
  const containerCenter = containerRect.top + containerRect.height/2;

  let selectedItem;
  items.forEach(item => {
    const itemRect = item.getBoundingClientRect();
    if (Math.abs(itemRect.top + itemRect.height/2 - containerCenter) < 5) {
      selectedItem = item;
    }
  });

  if (selectedItem) {
    highlightSelected(selectedItem);
    updateSelectedDate();
  }
}

日期计算与更新：

function updateSelectedDate() {
  const year = getCenterValue('year-scroll');
  const month = getCenterValue('month-scroll');
  const day = getCenterValue('day-scroll');

  // 处理2月天数问题
  const maxDay = new Date(year, month, 0).getDate();
  const dayScroll = document.getElementById('day-scroll');
  if (day > maxDay) {
    dayScroll.scrollTop = (maxDay-1) * 40;
  }

  console.log(`Selected date: ${year}-${month}-${day}`);
}

优化建议

添加惯性滚动效果：

JS实现日期滚动选择

function enableMomentumScroll() {
  const containers = document.querySelectorAll('.scroll-container');
  containers.forEach(container => {
    let startY = 0;
    let startTime = 0;

    container.addEventListener('touchstart', e => {
      startY = e.touches[0].clientY;
      startTime = Date.now();
    });

    container.addEventListener('touchend', e => {
      const endY = e.changedTouches[0].clientY;
      const endTime = Date.now();
      const distance = endY - startY;
      const duration = endTime - startTime;
      const velocity = distance / duration;

      if (Math.abs(velocity) > 0.1) {
        const momentum = velocity * 1000;
        container.scrollBy({top: -momentum, behavior: 'smooth'});
      }
    });
  });
}