如何让交替滚动文本不超出父元素宽度，触碰边界即反向滚动？

你原有代码的问题出在两点：

• 给p标签设置的padding-left: 100%让p的总宽度变成了父容器宽度加文本自身宽度
• transform: translateX(-100%)中的百分比是相对于p自身的总宽度计算的，导致偏移距离过大，文本完全移出父容器后才会触发反向。

完整修改代码 #

CSS 部分

.text_scroll {
  border: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  container-type: inline-size; /* 开启容器查询，将当前元素作为子元素尺寸参考容器 */
}

.text_scroll_alt > p {
  width: max-content;
  border: 1px solid red;
  animation: scroll_alt 5s linear infinite alternate;
}

@keyframes scroll_alt {
  from {
    transform: translateX(0);
  }
  to {
    /* 100cqi = 父容器完整宽度，100% = p标签自身宽度，计算后刚好让文本右边缘触碰父容器右边缘 */
    transform: translateX(calc(100cqi - 100%));
  }
}

HTML 部分（和原有一致无需修改）

<div class="text_scroll text_scroll_alt">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

旧浏览器兼容方案 #

如果需要兼容不支持容器查询单位cqi的旧版本浏览器，可以加一段JS动态获取父容器宽度写入CSS变量，修改后代码如下：

新增JS代码

const scrollContainer = document.querySelector('.text_scroll')
// 动态写入父容器宽度变量
const updateContainerWidth = () => {
  scrollContainer.style.setProperty('--container-width', `${scrollContainer.offsetWidth}px`)
}
updateContainerWidth()
// 窗口尺寸变化时同步更新变量
window.addEventListener('resize', updateContainerWidth)

对应修改CSS动画部分

@keyframes scroll_alt {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(var(--container-width) - 100%));
  }
}

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