<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 500px;
height: 200px;
background-color: wheat;
overflow-x: auto;
}
p{
width: 1000px;
}
</style>
</head>
<body>
<div id="box">
<p>
a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒a阿萨德阿萨德撒
</p>
</div>
<script>
CreatDrag('box')
function CreatDrag(id) {
var oBox = document.getElementById(id);
oBox.onmousedown = function(ev) {
var ev = ev || event;
var Y = ev.clientY;
var X = ev.clientX;
var ToTop = document.getElementById(id).scrollTop;
var Toleft = document.getElementById(id).scrollLeft;
oBox.onmousemove = function(ev) {
ev = ev || event;
var subY = ev.clientY - Y;
var subX = ev.clientX - X ;
Y = ev.clientY;
X = ev.clientX;
ToTop -= (subY);
Toleft -= (subX);
document.getElementById(id).scrollTop = ToTop;
document.getElementById(id).scrollLeft =Toleft;
console.log(Toleft);
}
document.onmouseup = function() {
oBox.onmousemove = function() {
null;
}
}
}
}
</script>
</body>
</html>