本经验介绍在html/css/js的编程当中，如何实现当一个元素宽度超过父层级时，自动播放滚动动画。
工具/原料
Firefox
方法/步骤
1、首先，用以演示的html页面结构如图，有几个column，每个column里有几行方格，每个方格里有文字。文字可能过长，超出单元格大小。
2、首先第一步，禁鸦泸嚏烊止文字折行显示，并隐藏超出部分。对于文字元素使用white-space:nowrap样式。对于文字的父元素使用overflow:hidden样式。效果如图。
3、接下来，我们要给宽度超出父元素的情况添加一些皱诣愚继样式。为此，使用js代码实现一个函数，获取所有这样的元素（如图是都含有state-textclass的元素），并依次比较他们各自是炯善挠勿否超过各自父节点宽度。如果超过，添加一个class用于增加样式。
4、然后，使用setInterval让这个函数每过一段时间执行一次，如图每3秒检查一下页面上所有class含有state-text的元素。
5、然后给运行时添加的那个class，编写对应的css样式。添加一个animati艺皱麾酪on，使用ease-in-out过渡方式，动画含有怎剑词阶两个关键帧，用transform中的translateX来实现，如图。此时已经可以看到动画效果了，但是向左移动100%的话整个单元就空了，因此移动距离应该减去一个父元素的宽度。
6、为了实现移动距离更加精确，且能适应运行时各种不同尺寸，我们给css样式添加一个变量--bar-width，并用calc函数来使用它。
7、在js代码中，添加对应的更新css变量的逻辑。如图，获取父节点宽度，并在子节点上调用style.setProperty来设置css变量值。
8、最终实现了滚动效果如图所示。即使各个单元格宽度不同，即使宽度是运行时变化的，它们都能实现合理的滚动显示。
