<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=utf-8" />
<style type="text/css">
#a{
margin: auto;
height:80px;
width:500px;
background-color: green;
overflow-x: scroll;
overflow-y: hidden;
}
body{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
#b{
height:80px;
width:1000px;
background-color: red;
}
.projList{
width:100%;
height:300px;
cursor: move;
overflow-x:auto;
}
</style>
</head>
<body id="c">
<div>
<div id="a" class="projList">
<div id="b">
aedadasdadssssssssssssssssssssssssssssssssssssssssssaaaassssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssyyyy
</div>
</div>
<div>fghjkggfh</div>
</div>
<script>
window.onload = function () {
var body = document;
var dv = document.getElementById('a'), ox;
//上一次的位置 scrollLeft
var last_left = 0;
dv.onmousedown = function (e) {
dv.onmousemove = mousemove;
body.onmouseup = mouseup;
e = e || window.event;
//如果上次有记录
console.log(last_left)
if(last_left > 0 ){
//就减掉上次的距离
ox = last_left + e.clientX;
}else{
// ox = dv.scrollLeft - e.clientX;
ox = e.clientX;
}
// dv.className = 'projList';
};
function mousemove(e) {
e = e || window.event;
// if(dv.scrollLeft==0){
// dv.onmouseup = dv.onmousemove = null;
// }
// console.log(ox,dv.scrollLeft,e.clientX)
console.log(dv.scrollWidth,dv.scrollLeft,dv.clientWidth)
if(dv.scrollWidth-dv.scrollLeft!==dv.clientWidth){
last_left = ox- e.clientX ;
}
dv.scrollLeft = ox - e.clientX ;
}
function mouseup(e) {
// dv.className = '';
dv.onmouseup = dv.onmousemove = null;
}
}()
</script>
</body>
</html>
网友评论