回到课程

滚动条

重要程度: 5

创建一个滚动条

用鼠标拖动蓝色 thumb 并移动它。

重要的细节:

  • 在按住鼠标进行拖动时,鼠标可能会越过滚动条的上下边界,滑块应该还在继续移动(对用户来说,这非常方便)。
  • 如果鼠标在移动到左边或右边的速度非常快,那么 thumb 应该完全停在边缘。

打开一个任务沙箱。

我们这里有一个水平拖放。

我们使用 position:relative 和滚动条的相对坐标的 thumb 来定位元素。这里比 position:absolute 更方便。

使用沙箱打开解决方案。