js横向时间轴滑动代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Timeline</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="timeline-container">
        <div class="timeline">
            <div class="event" style="--date: 2020;">2020</div>
            <div class="event" style="--date: 2021;">2021</div>
            <div class="event" style="--date: 2022;">2022</div>
            <div class="event" style="--date: 2023;">2023</div>
            <div class="event" style="--date: 2024;">2024</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
}

.timeline-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px;
}

.timeline {
    display: inline-flex;
    align-items: center;
}

.event {
    padding: 10px 20px;
    margin-right: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.event:hover {
    background-color: #ddd;
}

document.querySelectorAll('.event').forEach(event => {
    event.addEventListener('click', () => {
        alert(`Selected year: ${event.style.getPropertyValue('--date')}`);
    });
});