为何列表无法适配wrapper容器？marquee滚动组件溢出问题求助

AI 小北

2026-7-1

问题：Marquee滚动列表项溢出容器

我正在尝试创建一个marquee滚动文本元素，但有一个列表项溢出了列表容器，完全不清楚问题原因。希望实现列表完整适配wrapper容器的效果，问题截图如下：
Marquee溢出问题截图

HTML代码

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>

<div class="tickerwrapper">
  <ul class="list">
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
  </ul>
</div>

CSS代码

.tickerwrapper {
  position: relative;
  top: 30px;
  left: 0%;
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 40px;
  margin: 0;
  color: aliceblue;
}

ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}

ul.list li {
  float: left;
  padding-left: 20px;
}

.client_img {
  height: 4vw;
  padding-left: 100px;
}

JavaScript代码

var $tickerWrapper = $(".tickerwrapper");
var $list = $tickerWrapper.find("ul.list");
var $clonedList = $list.clone();
var listWidth = 10;

$list.find("li").each(function (i) {
  listWidth += $(this, i).outerWidth(true);
});

var endPos = $tickerWrapper.width() - listWidth;

$list.add($clonedList).css({
  width: listWidth + "px",
});

$clonedList.addClass("cloned").appendTo($tickerWrapper);

//TimelineMax
var infinite = new TimelineMax({
  repeat: -1,
  paused: true,
});
var time = 40;

infinite
  .fromTo(
    $list,
    time,
    {
      rotation: 0.01,
      x: 0,
    },
    {
      force3D: true,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    0
  )
  .fromTo(
    $clonedList,
    time,
    {
      rotation: 0.01,
      x: listWidth,
    },
    {
      force3D: true,
      x: 0,
      ease: Linear.easeNone,
    },
    0
  )
  .set($list, {
    force3D: true,
    rotation: 0.01,
    x: listWidth,
  })
  .to(
    $clonedList,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    time
  )
  .to(
    $list,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: 0,
      ease: Linear.easeNone,
    },
    time
  )
  .progress(1)
  .progress(0)
  .play();

//Pause/Play
$tickerWrapper
  .on("mouseenter", function () {
    infinite.pause();
  })
  .on("mouseleave", function () {
    infinite.play();
  });

解决方案

问题出在CSS布局细节和列表宽度计算的错误上，以下是针对性修复：

1. 修复容器高度失效问题

.tickerwrapper 的 height:100% 依赖父元素高度，若父元素无明确高度则会失效，导致容器无法容纳列表内容：

.tickerwrapper {
  /* 替换原height:100% */
  height: auto;
  min-height: 120px; /* 根据图片尺寸调整 */
}

2. 移除列表多余内边距

ul.list 的 padding:40px 会增加列表总宽度，且未被JS计算在内，导致溢出：

ul.list {
  /* 替换原padding:40px */
  padding: 20px 0;
}

3. 减小图片左侧过大间距

.client_img 的 padding-left:100px 让列表项过宽，可按需调整：

.client_img {
  height: 4vw;
  padding-left: 20px; /* 减小或设为0 */
}

4. 修正列表宽度计算逻辑

JS中初始值多余且选择器写法错误，需调整：

var listWidth = 0; // 初始化为0而非10

$list.find("li").each(function () {
  listWidth += $(this).outerWidth(true); // 移除多余的i参数
});

完整修改后代码

修改后的CSS

.tickerwrapper {
  position: relative;
  top: 30px;
  left: 0%;
  background: transparent;
  width: 100%;
  height: auto;
  min-height: 120px;
  overflow: hidden;
  cursor: pointer;
}

ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 20px 0;
  margin: 0;
  color: aliceblue;
}

ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}

ul.list li {
  float: left;
  padding-left: 20px;
}

.client_img {
  height: 4vw;
  padding-left: 20px;
}

修改后的JS

var $tickerWrapper = $(".tickerwrapper");
var $list = $tickerWrapper.find("ul.list");
var $clonedList = $list.clone();
var listWidth = 0;

$list.find("li").each(function () {
  listWidth += $(this).outerWidth(true);
});

var endPos = $tickerWrapper.width() - listWidth;

$list.add($clonedList).css({
  width: listWidth + "px",
});

$clonedList.addClass("cloned").appendTo($tickerWrapper);

//TimelineMax
var infinite = new TimelineMax({
  repeat: -1,
  paused: true,
});
var time = 40;

infinite
  .fromTo(
    $list,
    time,
    {
      rotation: 0.01,
      x: 0,
    },
    {
      force3D: true,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    0
  )
  .fromTo(
    $clonedList,
    time,
    {
      rotation: 0.01,
      x: listWidth,
    },
    {
      force3D: true,
      x: 0,
      ease: Linear.easeNone,
    },
    0
  )
  .set($list, {
    force3D: true,
    rotation: 0.01,
    x: listWidth,
  })
  .to(
    $clonedList,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    time
  )
  .to(
    $list,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: 0,
      ease: Linear.easeNone,
    },
    time
  )
  .progress(1)
  .progress(0)
  .play();

//Pause/Play
$tickerWrapper
  .on("mouseenter", function () {
    infinite.pause();
  })
  .on("mouseleave", function () {
    infinite.play();
  });

修改后列表项将不再溢出容器，滚动效果正常运行。

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

为何列表无法适配wrapper容器？marquee滚动组件溢出问题求助

HTML代码 #

CSS代码 #

JavaScript代码 #

1. 修复容器高度失效问题 #

2. 移除列表多余内边距 #

3. 减小图片左侧过大间距 #

4. 修正列表宽度计算逻辑 #

完整修改后代码 #

修改后的CSS #

修改后的JS #