JS实现自定义滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
width: 600px;
height: 20px;
background: #ccc;
position: relative;
margin: 10px auto;
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 300px;
height: 400px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
#div3 {
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oParent = document.getElementById('parent');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var disX = 0;
oDiv.onmousedown = function(ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
function mouseMove(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
if(l<0)
{
l=0;
}else if(l>oParent.offsetWidth-oDiv.offsetWidth)
{
l= oParent.offsetWidth-oDiv.offsetWidth;
}
oDiv.style.left = l + 'px';
//得到滚动位置的比例
var scale = l/(oParent.offsetWidth-oDiv.offsetWidth);
//document.title = scale ;
//需要减去div2的高度
oDiv3.style.top= -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
};
function mouseUp() {
this.onmousemove = null;
this.onmouseup = null;
if(this.releaseCapture) {
this.releaseCapture();
}
}
//兼容性判定
if(oDiv.setCapture) {
//IE
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();
} else {
//Chrome/FF
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
return false; //chrome,ff,ie9
}
}
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
线程和进程
因此，我们应该要听从苹果的劝告，珍爱生命，远离线程。不过话又说回来，尽管队列是执行并发任务的首先方式，但是毕竟它们也不是什么万能的灵丹妙药。所以，在以下三种场景下，我们还是应该直接使用线程的：
* 用线程以外的其他任何方式都不能实现我们的特定任务；
* 必须实时执行一个任务。因为虽然队列会尽可能快地执行我们提交的任务，但是并不能保证实时性；
* 你需要对在后台执行的任务有更多的可预测行为.
*
NSInvocationOperation ：我们可以通过一个 object 和 selector 非常方便地创建一个 NSInvocationOperation ，这是一种非常动态和灵活的方式。假设我们已经有了一个现成的方法，这个方法中的代码正好就是我们需要执行的任务，那么我们就可以在不修改任何现有代码的情况下，通过方法所在的对象和这个现有方法直接创建一个 NSInvocationOperation 。
NSBlockOperation ：我们可以使用 NSBlockOperation 来并发执行一个或多个 block ，只有当一个 NSBlockOperation 所关联的所有 block 都执行完毕时，这个 NSBlockOperation 才算执行完成，有点类似于 dispatch_group 的概念。
另外，所有的 operation 都支持以下特性：
* 支持在 operation 之间建立依赖关系，只有当一个 operation 所依赖的所有 operation 都执行完成时，这个 operation 才能开始执行；
* 支持一个可选的 completion block ，这个 block 将会在 operation 的主任务执行完成时被调用；
* 支持通过 KVO 来观察 operation 执行状态的变化；
* 支持设置执行的优先级，从而影响 operation 之间的相对执行顺序；
* 支持取消操作，可以允许我们停止正在执行的 operation 。
在绝大多数情况下，我们都不需要去实现一个并发的 operation 。如果我们一直是通过将 operation 添加到 operation queue 的方式来执行 operation 的话，我们就完全没有必要去实现一个并发的 operation 。因为，当我们将一个非并发的 operation 添加到 operation queue 后，operation queue 会自动为这个 operation 创建一个线程。因此，只有当我们需要手动地执行一个 operation ，又想让它异步执行时，我们才有必要去实现一个并发的 operation 。
</div>
</div>
</body>
</html>
