需求实现：带标题与子标题的滚动消息展示系统

Got it, let's build that scrolling message system you're asking for. I'll walk through a complete, working example using vanilla JS, CSS, and HTML—lightweight, easy to tweak, and perfectly aligned with your requirements.

Step 1: Basic HTML Structure #

First, we'll set up a container to hold everything, plus elements for the active header and scrolling message area:

<div class="message-container">
  <h2 class="active-header"></h2>
  <div class="messages-scroll-area">
    <div class="messages-list"></div>
  </div>
</div>

Step 2: CSS for Styling & Scroll Behavior #

We'll style the container to keep things contained, add visual polish, and set up the scroll area to hide overflow (so we can animate the message list inside):

.message-container {
  width: 400px;
  height: 200px;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.active-header {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

.messages-scroll-area {
  height: 120px;
  overflow: hidden;
  position: relative;
}

.messages-list {
  position: absolute;
  top: 0;
  width: 100%;
  transition: top 0.5s ease-in-out;
}

.message-item {
  padding: 0.5rem 0;
  margin: 0;
  color: #34495e;
}

Step 3: JavaScript Logic (Core Functionality) #

Now we'll define your header and message arrays, then add logic to cycle through headers and scroll their corresponding messages automatically:

// Your header array (as specified)
const Headers = [["Header 1"], ["Header 2"], ["Header 3"], ["Header 4"]];

// Corresponding message arrays
const Messages1 = [["Message1 1"], ["Message1 2"], ["Message1 3"]];
const Messages2 = [["Message2 1"], ["Message2 2"], ["Message2 3"]];
const Messages3 = [["Message3 1"], ["Message3 2"]]; // Handles variable message lengths
const Messages4 = [["Message4 1"], ["Message4 2"], ["Message4 3"], ["Message4 4"]];

// Map headers to their message arrays for easy lookup
const headerToMessages = {
  "Header 1": Messages1,
  "Header 2": Messages2,
  "Header 3": Messages3,
  "Header 4": Messages4
};

// DOM elements
const activeHeaderEl = document.querySelector(".active-header");
const messagesListEl = document.querySelector(".messages-list");
const scrollAreaEl = document.querySelector(".messages-scroll-area");

let currentHeaderIndex = 0;
let currentMessageIndex = 0;
let scrollInterval;
let headerCycleInterval;

// Load messages for the currently active header
function loadCurrentHeaderMessages() {
  const currentHeader = Headers[currentHeaderIndex][0];
  activeHeaderEl.textContent = currentHeader;
  
  // Clear existing messages
  messagesListEl.innerHTML = "";
  
  // Populate message list
  const messages = headerToMessages[currentHeader];
  messages.forEach(msg => {
    const item = document.createElement("p");
    item.className = "message-item";
    item.textContent = msg[0];
    messagesListEl.appendChild(item);
  });
  
  // Reset scroll state and start scrolling
  currentMessageIndex = 0;
  resetScrollPosition();
  startMessageScroll();
}

// Reset message list to top position
function resetScrollPosition() {
  messagesListEl.style.top = "0px";
}

// Animate message scroll upward
function scrollMessages() {
  const messageHeight = document.querySelector(".message-item").offsetHeight;
  const totalMessages = messagesListEl.children.length;
  
  // Reset to top when we hit the last message
  if (currentMessageIndex >= totalMessages - 1) {
    resetScrollPosition();
    currentMessageIndex = 0;
  } else {
    currentMessageIndex++;
    const newTop = -currentMessageIndex * messageHeight + "px";
    messagesListEl.style.top = newTop;
  }
}

// Start auto-scrolling messages
function startMessageScroll() {
  // Clear existing interval first to avoid conflicts
  if (scrollInterval) clearInterval(scrollInterval);
  // Scroll every 2 seconds (adjust timing as needed)
  scrollInterval = setInterval(scrollMessages, 2000);
}

// Cycle to the next header
function cycleHeader() {
  currentHeaderIndex = (currentHeaderIndex + 1) % Headers.length;
  loadCurrentHeaderMessages();
}

// Initialize the system and start header cycling
loadCurrentHeaderMessages();
// Switch headers every 8 seconds (adjust timing as needed)
headerCycleInterval = setInterval(cycleHeader, 8000);

How It Works #

• We map each header to its message array for quick lookup when switching headers.
• loadCurrentHeaderMessages updates the displayed header and populates the message list with relevant content.
• scrollMessages animates the message list upward, resetting to the top once it reaches the last message.
• Two intervals handle the auto-scroll: one for message movement (every 2s) and one for header switching (every 8s)—tweak these timings to match your needs.

Customization Tips #

• Adjust CSS values (width, height, colors, padding) to match your design system.
• Change interval timings in startMessageScroll and headerCycleInterval to make scrolling faster/slower or headers switch more/less frequently.
• Add hover pausing by adding mouseenter/mouseleave event listeners to the container that clear/restart the intervals.

内容的提问来源于stack exchange，提问作者jmcall10