Hiệu ứng cuộn tự động thường xuất hiện trong các thành phần như bảng tin, banner quảng cáo hoặc danh sách thông báo. Dưới đây là ba cách triển khai hiệu quả — mỗi cách sử dụng cơ chế khác nhau và phù hợp với các yêu cầu cụ thể về hiệu suất, khả năng tương thích và tính linh hoạt.

1. Cuộn dọc bằng JavaScript thuần (không cần thư viện)

Kỹ thuật này dựa vào việc điều khiển thuộc tính marginTop của một khối chứa danh sách, kết hợp với vòng lặp định kỳ và logic reset khi đạt đến cuối nội dung. Đoạn mã sau đã được tái cấu trúc để tăng tính rõ ràng và độ ổn định:

function launchVerticalScroller(containerId, lineHeight, stepMs, intervalMs) {
  const container = document.getElementById(containerId);
  if (!container) return;

  // Nhân đôi nội dung để tạo hiệu ứng cuộn liên tục
  container.innerHTML += container.innerHTML;
  container.style.marginTop = '0px';

  let isPaused = false;
  let scrollTimer;

  const startScroll = () => {
    if (isPaused) return;
    container.style.marginTop = `${parseInt(container.style.marginTop) - 1}px`;
  };

  const animate = () => {
    const currentTop = parseInt(container.style.marginTop);
    const halfHeight = container.scrollHeight / 2;

    if (Math.abs(currentTop) >= halfHeight) {
      container.style.marginTop = '0px';
      return;
    }

    if (currentTop % lineHeight !== 0) {
      container.style.marginTop = `${currentTop - 1}px`;
    } else {
      clearInterval(scrollTimer);
      setTimeout(() => {
        scrollTimer = setInterval(startScroll, stepMs);
      }, intervalMs);
    }
  };

  container.addEventListener('mouseenter', () => isPaused = true);
  container.addEventListener('mouseleave', () => isPaused = false);

  scrollTimer = setInterval(animate, stepMs);
}

// Khởi chạy: mỗi bước 20ms, nghỉ 1000ms sau mỗi lần cuộn hoàn chỉnh, chiều cao dòng 48px
launchVerticalScroller('newsFeed', 48, 20, 1000);

2. Cuộn mượt bằng jQuery với hỗ trợ chiều cao động

Phương pháp này tận dụng .animate() để di chuyển khối nội dung lên trên, sau đó đưa dòng đầu tiên xuống cuối — đảm bảo cuộn mượt mà và không phụ thuộc vào chiều cao cố định từng mục:

function smoothVerticalScroll(selector) {
  const $list = $(selector);
  const firstItem = $list.find('> *:first-child');
  const itemHeight = firstItem.outerHeight(true) || 48;

  $list.animate(
    { marginTop: `-${itemHeight}px` },
    { 
      duration: 1000,
      easing: 'linear',
      complete: function() {
        firstItem.appendTo($list);
        $list.css('marginTop', '0');
      }
    }
  );
}

// Thiết lập chu kỳ tự động
let scrollInterval;
const SCROLL_DELAY = 2500;
scrollInterval = setInterval(() => smoothVerticalScroll('#ticker'), SCROLL_DELAY);

3. Cuộn ngang từ trái sang phải (marquee ngang)

Được triển khai bằng scrollLeft, kỹ thuật này đặc biệt hữu ích cho thanh thông báo dạng băng chuyền. Phiên bản cải tiến dưới đây xử lý chính xác biên giới cuộn và hỗ trợ tạm dừng khi người dùng di chuột vào:

function horizontalMarquee(wrapperId, contentStartId, contentEndId, speed = 30) {
  const wrapper = document.getElementById(wrapperId);
  const startContent = document.getElementById(contentStartId);
  const endContent = document.getElementById(contentEndId);

  if (!wrapper || !startContent || !endContent) return;

  endContent.innerHTML = startContent.innerHTML;
  let marqueeInterval;

  function run() {
    if (wrapper.scrollLeft >= wrapper.scrollWidth / 2) {
      wrapper.scrollLeft = 0;
    } else {
      wrapper.scrollLeft++;
    }
  }

  const start = () => {
    marqueeInterval = setInterval(run, speed);
  };

  wrapper.addEventListener('mouseenter', () => clearInterval(marqueeInterval));
  wrapper.addEventListener('mouseleave', start);

  start();
}

// Sử dụng: bao ngoài là #marqueeWrapper, nội dung gốc ở #source, bản sao ở #clone
horizontalMarquee('marqueeWrapper', 'source', 'clone');