1. Tổng quan

• Định nghĩa: Cấu hình cách xử lý các phần tử hoặc văn bản có kích thước vượt quá giới hạn (width/height) của vùng chứa (Container).
• Lợi ích/Giá trị: Tránh vỡ layout khi nội dung quá dài, cung cấp tính năng thanh cuộn nội bộ giúp thiết kế gọn gàng hơn.
• Đối tượng sử dụng: Marketer, Designer.

2. Giải thích Thuật ngữ & Thông số

• Chế độ Ẩn/Hiện (Overflow Visibility): Hành vi của vùng chứa khi nội dung bên trong nó dài/rộng hơn chính nó.
• Thanh cuộn (Scrollbar): Công cụ cho phép kéo lướt xem các nội dung bị che khuất.

3. Điều kiện tiên quyết (Prerequisite)

• Bài viết trước: Sử dụng các Phần tử (Elements) trong thiết kế Landing Page.
• Phân quyền: Tài khoản Mobio phải được cấp quyền RBAC: LANDING-PAGE. Xem hướng dẫn phân quyền truy cập RBAC tại đây.
• Đường dẫn truy cập: Marketing → Landing Page → Landing Page Builder → Nhấp vào tên trang để mở Editor.

4. Các bước cấu hình

4.1. Tạo kích thước cho Vùng chứa

• Để có thể sử dụng được tính năng “Cuộn”, bạn bắt buộc phải thiết lập kích thước tối đa (Width hoặc Height) cố định cho vùng chứa.

4.2. Chọn Chế độ hiển thị (Overflow)

• Chọn vùng chứa cần cấu hình → Kéo xuống mục Cài đặt nội dung.
• Chọn 1 trong 3 thuộc tính hiển thị sau:
  • Hiện (Mặc định): Dù nội dung (ví dụ: văn bản) có vượt quá kích thước vùng chứa, hệ thống vẫn sẽ hiển thị tràn ra ngoài.
  • Ẩn: Những đoạn nội dung nằm ngoài kích thước của Vùng chứa sẽ bị cắt bỏ và không hiển thị trên màn hình.
  • Cuộn: Nội dung vượt quá sẽ bị che đi, nhưng người dùng có thể cuộn chuột để xem tiếp.

4.3. Cài đặt thanh Cuộn (Nếu chọn chế độ Cuộn)

Nếu bạn chọn thuộc tính “Cuộn”, hệ thống sẽ hiển thị thêm các tùy chỉnh thanh cuộn:

• Hướng của thanh cuộn:
  • Dọc: Chỉ cho phép cuộn từ trên xuống dưới và ngược lại.
  • Ngang: Chỉ cho phép cuộn từ trái sang phải và ngược lại.
  • Cả hai: Cho phép cuộn tự do cả 2 chiều dọc và ngang.
• Kiểu hiển thị thanh cuộn:
  • Chỉ hiển thị khi di chuột vào (Hover): Giao diện gọn gàng, thanh cuộn chỉ hiện ra khi người dùng đưa chuột vào vùng chứa.
  • Luôn hiển thị: Thanh cuộn luôn xuất hiện trên màn hình để báo hiệu cho khách hàng biết có thể cuộn.

5. Quy tắc vận hành

• Chế độ “Ẩn” thường được dùng kết hợp với các hiệu ứng Animation trượt, giúp ẩn các phần tử khi chưa có hiệu ứng diễn ra.

6. Các câu hỏi thường gặp (FAQ)

• Hỏi: Tại sao tôi chọn cuộn dọc nhưng khi preview vẫn không có tác dụng?
  • Trả lời: Có 2 nguyên nhân:
    • Bạn chưa xét giá trị chiều cao (Height) cố định cho vùng chứa.
    • Nội dung bên trong thực tế chưa dài vượt quá chiều cao của vùng chứa.

7. Bước tiếp theo

N/A