<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
1000px;
height: 50px;
background-color: blue;
position: relative;
margin: 0 auto;
}
.box2{
50px;
height: 50px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}
.dv1{
300px;
height: 300px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.dv2{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<div class="dv1">
<div class="dv2">
在 w3school，你可以找到你所需要的所有的网站建设教程。
从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。
从左侧的菜单选择你需要的教程！
完整的网站技术参考手册
完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。
其中包括W3C的标准技术：HTML、CSS、XML 。以及其他的技术，诸如JavaScript、PHP、SQL等等。
在线实例测试工具
在线实例测试工具
在w3school，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
快捷易懂的学习方式
在 w3school，你可以找到你所需要的所有的网站建设教程。
从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。
从左侧的菜单选择你需要的教程！
完整的网站技术参考手册
完整的网站技术参考手册
我们的参考手册涵盖了网站技术的方方面面。
其中包括W3C的标准技术：HTML、CSS、XML 。以及其他的技术，诸如JavaScript、PHP、SQL等等。
在线实例测试工具
在线实例测试工具
在w3school，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
快捷易懂的学习方式
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
$('.box2').mousedown(function(e){ //当鼠标按下
// console.log(1)
var x=e.pageX-$(this).offset().left
//盒子左侧到当前鼠标的距离[内部距离] offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。
// $('.box2').mousemove(function(){
// })
$('.box2').bind('mousemove',function(e){ //绑定mousemove事件
var _x=e.pageX-$('.box1').offset().left-x;
var width=$('.box1').width()-$('.box2').width(); //滑块活动范围
if(_x<0){
_x=0;
}else if(_x>width){
_x=width
}
var t=_x/width
// console.log(e.pageX)
// 总长-盒子内部的距离
$('.box2').css('left',_x)
var T=t*($('.dv2').height()-$('.dv1').height())
$('.dv2').css('top',-T)
})
$('.box2').mouseup(function(){ //鼠标弹起，解除绑定
$('.box2').unbind('mousemove');
})
})
})
</script>
</html>