表面上看，需要设置两个点，实际上包含了两个掩藏点 起始点 (0,0) 和 终点 (1,1) 。所以实际上应该是以下效果。
可以看出，贝塞尔曲线是由4个点构成的一条线，可能是任意形状的线。下面给出一些线型例子来说明。
这种运动模式下 x1 ∈ [0, 0.5], 且 y1 >x1 且 x2 ∈ [0.5, 1] 且 y2 <x2 。此时的运动轨迹习惯上称之为 ease ，下面给出一个夸张点的图像：
这种模式下，x1 ∈ [0, 1] 且 y1 <x1 且 x2 ∈ [0, 1] 且 y2 <x2 。 此时的运动轨迹成为 ease-in ，下面是示意图：
这种模式是与 3 的情况相反，所以 x ∈ [0, 1] 且 y >x 时，这里两个点都要符合这种情况才能实现。习惯上称这种情况为 ease-out ，下面给出示意图：
以上的四种情况中，常见的 ease-in-out 与 ease 的曲线一致，只是 ease-in-out 慢的部分更慢，快的部分更快。
可以用过 这个网站 观察贝赛尔曲线的运动轨迹。
另外，本文参考自
定义滚动条就是利用伪元素与伪类，那什么是伪元素和伪类呢？伪类大家应该很熟悉:link,:focus,:hover，此外CSS3中又增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after。那么在CSS3中，伪元素进行了调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了一个“::selection”。两个“：：”和一个“：”在css3中主要用来区分伪类和伪元素。
webkit的伪类和伪元素的实现很强，可以把滚动条当成一个页面元素来定义，再结合一些高级的CSS3属性，比如渐变、圆角、RGBa等等。然后如果有些地方要用图片，可以把图片也可以转换成Base64，不然每次都得加载那个多个图片，增加请求数。
任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂，具体怎么写可以看第一个demo，那里也有注释。
可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。
