js实现数字滚动显示(最短滚动版)

前言

标题解释：
数字滚动： 数字 0 变为 5，显示该数字的元素向上滚动最后显示 5
最短滚动： 数字 9 变为 1，向下滚动依次显示 9 - 0 - 1
如果这是你需要的‘组件’，那就继续吧！

需求

存在两个数字 start、end，需要实现一个类似滚轮滚动的效果，由 start 滚动到 end，其中，每次滚动都需要以尽量少的次数滚动
例如：
9 - 1 ==> 9 - 0 - 1;
2 - 0 ==> 2 - 1 - 0;

实现

首先，一步步的来，我们先实现滚动效果，暂不考虑 最短滚动
先来一个窗口用来观察滚轮

<div class="scroller-window">
	<div class="single-window">
		<p>0</p><p>1</p><p>2</p><p>3</p><p>4</p>
		<p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
	</div>
</div>

.scroller-window {
   
  ...
  height: 3em;
  overflow: hidden;
}
.single-scroller {
   
  transition: transform ease-in;
}

接下来只需要将 scroller-window 下的 p元素高度设为 100%，然后，根据 end的值，将 single-scroller 滚动(translateY)即可

<