Webflow中jQuery新闻滚动条无法实现全屏宽度的技术求助

我在Webflow中用代码实现了新闻滚动条，功能正常，但无法将其设置为浏览器全屏宽度。即使把所有元素宽度设为100%也无效，找不到固定宽度的来源，求解决思路。

解决思路 #

• 移除Webflow默认容器限制：你的HTML结构中，.news-ticker-container.w-container是Webflow自带的容器类，默认带有固定宽度（如960px/1200px），直接限制了滚动条的宽度范围，需要重置这个类的宽度规则。
• 修正CSS的定位与宽度设置：原CSS中.mask的left:10px会导致容器右侧留白，改为left:0；同时用100vw替代100%确保滚动条容器占满视窗宽度。
• 调整JS的宽度计算逻辑：原JS中获取的是父容器宽度，若父容器被限制则无法得到全屏宽度，改为直接获取窗口宽度来计算滚动参数。

修改后的代码 #

JavaScript #

jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
    travelocity: 0.07
  }, settings);
  return this.each(function() {
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i) {
      stripWidth += jQuery(this, i).outerWidth(true);
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    // 直接获取窗口宽度作为全屏容器宽度
    var containerWidth = $(window).width();    
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity;     
    function scrollnews(spazio, tempo) {
      $strip.animate({
        left: '-=' + spazio
      }, tempo, "linear", function() {
        $strip.css("left", containerWidth);
        scrollnews(totalTravel, defTiming);
      });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(function() {
        jQuery(this).stop();
      },
      function() {
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
      });
  });
};

$(function() {
  $("ul#demo").liScroll();
});

CSS #

/* 重置浏览器默认边距，避免干扰 */
body {
  margin: 0;
  padding: 0;
}

.tickercontainer {
  border: 0;
  background: #f5d82b;
  width: 100vw; /* 强制占满视窗宽度 */
  height: 30px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tickercontainer .mask {
  position: relative;
  left: 0; /* 移除左侧偏移，避免留白 */
  top: 0;
  width: 100%;
  overflow: hidden;
}

ul.newsticker {
  position: relative;
  left: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.newsticker li {
  float: left;
  margin: 0;
  padding: 0 20px; /* 给文字添加左右内边距，提升可读性 */
  background: #f5d82b;
  white-space: nowrap; /* 确保文字不换行 */
}

ul.newsticker a {
  white-space: nowrap;
  padding: 0;
  color: #ff0000;
  margin: 0;
}

ul.newsticker span {
  margin: 0;
}

/* 重置Webflow容器的固定宽度限制 */
.news-ticker-container.w-container {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

HTML #

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="body">
  <div class="news-ticker wf-section">
    <div class="news-ticker-container w-container">
      <div class="tickercontainer">
        <div class="mask">
          <ul id="demo" role="list" class="list">
            <li>Finding the right artist for your creative endeavour has never been so easy - all on one page.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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