前言

overflow：auto 可以实现拖拽，你信或者不信，我已经在代码里面都实现了这个，不信的话，你读完这篇文章，你也可以在你的代码里面实现这个。一句话概括就是CSS实现了拖拽。

兼容性怎么样

你问我兼容性怎么样，我就感觉你仿佛在问我overflow：auto的兼容性怎么样。

实现效果

看到图中那个音乐播放器被在到处动嘛？他就是我用overflow：auto实现的拽动，神奇吧。在 css 的世界只有你想不到，没有你做不到的。从震惊，type=”range” 居然可以实现评星功能到现在的 overflow：auto 实现拖拽效果，在我入职阅文之后，一次又一次刷新了我对css的认知，打开我眼界。

音乐播放器播放进度参考饼图图形与动画

overflow:实现拖拽效果 => 手机版效果

这是一个十分钟出现的ID

或许你觉得我这个标题夸张了，但是我确实是十分钟就看到了这个实现的demo。

背景是这样：在公司我主要负责高度还原设计稿简称原型开发，原型实现完了交给技术部的同事实现后续的数据逻辑开发。

在一次音乐播放器的原型开发中，有一个音乐播放器拖拽的功能，最开始我是用js的API实现onmousemove 手指移动的时候相当于拖动，ondragstart 开始拖动的时候。这种方式是可以实现，但是很麻烦，需要对元素拖动的位置进行上下左右的边界判断，越界的时候要进行处理，而且不够优雅。技术部同事拿到我开发的原型，发现了一些莫名其妙的问题，见我代码页不够优雅，于是给我指了一个方向，说找我的老搭档。

一边和老搭档讨论着，一边在解决问题，问题解决了一个，又来一个。

当时我在想是不是我的实现原理或者思路出现问题，代码越写越复杂了。脑子一片混乱的时候，同事给我指了条明道，说用 overflow：auto。我一脸懵逼，他是不是发错消息了？我将错就错的问加哪？我想他肯定会和我说，不好意思发错人了。可是三秒之后，我发现是我想错了，不是他发错了，给了我一链接，他真的实现了。