div内无限横向滚动失效？求HTML/CSS技术解决方案

Hey Jamie, let’s get that infinite horizontal text scroll working for you! It’s super common to hit snags with this when you’re just starting out with CSS, so let’s walk through fixing your code step by step.

First, let’s address the likely issues in your current snippet: you probably didn’t finish setting the overflow property (your code cuts off at ov...), and you’re missing the CSS animation that makes the scrolling happen. Also, that margin-left: 110% is probably pushing your entire container off-screen, which is why you can’t see anything working.

Here’s a complete, fixed version of your code that will get the infinite scroll up and running:

HTML Structure #

You’ll want a parent container (your #interior-right div) and a child element holding your scrollable text (this keeps the animation clean):

<div id="interior-right">
  <span class="scroll-content">
    Your long, continuous text goes here — add enough content so it stretches beyond the container width! For example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
  </span>
</div>

CSS Code #

#interior-right {
  display: inline-block;
  border: solid orange 2px;
  /* Removed margin-left: 110% — this was hiding your container */
  vertical-align: top;
  width: 1300px;
  height: 600px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 30px;
  overflow: hidden; /* Critical: hides text that spills outside the container */
}

.scroll-content {
  white-space: nowrap; /* Makes sure text stays on a single line */
  display: inline-block;
  /* Apply the infinite scroll animation */
  animation: scrollHorizontally 25s linear infinite;
}

/* Define the scroll animation */
@keyframes scrollHorizontally {
  from {
    transform: translateX(100%); /* Start text fully to the right of the container */
  }
  to {
    transform: translateX(-100%); /* Move text fully to the left, out of view */
  }
}

Key Fixes & Explanations #

• overflow: hidden: This is non-negotiable for the parent container. It hides any text that goes beyond the div’s width, so only the visible portion of the scrolling text shows up.
• white-space: nowrap: Prevents your text from wrapping to a new line — without this, the text would just stack vertically instead of scrolling horizontally.
• CSS Animation: The @keyframes rule defines the movement: starting the text off-screen to the right, then sliding it all the way to the left. The animation property ties this to the text, with linear keeping the speed consistent and infinite making it loop forever.
• Adjustments: If you want faster scrolling, lower the 25s value in the animation; slower scrolling means increasing it. You can also add back margin-left if you need specific positioning, just make sure it doesn’t push the container entirely out of the viewport.

Give this a shot, and you should see your text scrolling smoothly non-stop! If you run into any tweaks needed for your specific layout, just adjust the container dimensions or animation timing.

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