Hướng Dẫn Tạo Ứng Dụng Cuộn Ngang Bằng HTML, CSS và JavaScript Đơn Giản

Chào các bạn,

Chúc các bạn một năm mới tràn đầy sức khỏe và thành công! Hôm nay, mình xin giới thiệu một tiện ích rất thú vị, có thể áp dụng cho các trang web hoặc blog cá nhân lẫn doanh nghiệp, mang đến giao diện chuyên nghiệp và hiện đại. Hãy cùng nhau bắt tay vào thực hiện nhé!

Bước 1: Tạo Cấu Trúc HTML

Đầu tiên, chúng ta cần tạo cấu trúc HTML cơ bản cho phần nội dung. Mã HTML mà chúng ta sẽ sử dụng như sau:

<div class="container">
    <div class="top-bar">
        <!-- Biểu tượng và tiêu đề -->
        <h2>Thông Báo Sự Kiện Sắp Diễn Ra</h2>
        <button type="button" id="action-button--previous" class="action-button--horizontal-scroll">Quay Trở Lại</button>
        <button type="button" id="action-button--next" class="action-button--horizontal-scroll">Tiếp Tục</button>
    </div>
    <div id="events">
        <!-- Danh sách sự kiện -->
        <a href="#the-weeknd" class="event">Sự kiện 1</a>
        <a href="#the-weeknd" class="event">Sự kiện 2</a>
        <a href="#the-weeknd" class="event">Sự kiện 3</a>
    </div>
</div>

Cấu trúc này gồm phần tử cha .container, phần tiêu đề và hai nút điều hướng. Dưới tiêu đề là danh sách các sự kiện mà người dùng có thể cuộn để xem.

Bước 2: Thêm CSS Để Tạo Kiểu Dáng

Để làm cho thiết kế này trở nên bắt mắt hơn, bạn sẽ cần áp dụng các lớp CSS để định hình cho giao diện. Dưới đây là một ví dụ mã CSS mà bạn có thể sử dụng:

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px;
}

.container {
    margin: auto;
    max-width: 800px;
}

Đoạn CSS đơn giản trên sẽ giúp cho tiêu đề nổi bật hơn và các sự kiện sẽ được trình bày một cách gọn gàng.

Bước 3: Thêm Tính Năng JavaScript

Cuối cùng, hãy thực hiện thêm một số JavaScript để xử lý các sự kiện cuộn và điều hướng. Đoạn mã JavaScript sau sẽ giúp bạn thực hiện điều này:

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

document.getElementById('action-button--previous').onclick = function() {
    events.scrollBy({ top: 0, left: -100, behavior: 'smooth' });
};

document.getElementById('action-button--next').onclick = function() {
    events.scrollBy({ top: 0, left: 100, behavior: 'smooth' });
};

Mã trên cho phép bạn cuộn qua danh sách sự kiện khi nhấn vào các nút điều hướng.

Kết Luận

Vậy là bạn đã hoàn tất việc tạo một ứng dụng cuộn ngang đơn giản với HTML, CSS và JavaScript! Hy vọng rằng bài viết này sẽ giúp bạn tạo ra những trang thành công và ấn tượng. Chúc bạn thành công với dự án của mình!
source: viblo