为了方便引入了jquery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{width:600px;margin: 0 auto;overflow-x: auto;background: #00a7d0;}
#child{width: 1000px;height: 500px;background: #0bb20c;}
</style>
</head>
<body>
<div id="box">
<div id="child">134567892</div>
</div>
</body>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
setTimeout(() => {
$("#child").on("mousedown", function (e) {
let sx = e.offsetX; //记录鼠标落入指示区域时的坐标
let lx = $("#box").scrollLeft(); //记录鼠标落入指示区域时滚动条已滚动的距离
let timer; //给个延迟器是为了防止高频触发一直抖
$("body").on("mousemove", function (e1) {
//给body加此事件是为了解决一些异常
if (e1.target.id == "child") {
//判断移动区域是否为child
let ex = e1.offsetX; //记录移动时鼠标的横坐标
let x = ex - sx; //移动时的坐标减去落入时的坐标
if (x < 0) {
//如果小于0，说明鼠标是在往左边拖动
timer = setTimeout(function () {
//这一步是因为鼠标往左拖动，实际坐标轴会往右移动，也就是滚动条滚动距离变大，取落入时的滚动距离加差值的绝对值
$("#box").scrollLeft(lx + Math.abs(x));
}, 0);
}
if (x >= 0) {
//这一步就是上一判断的反结果
timer = setTimeout(function () {
$("#box").scrollLeft(lx - x);
}, 0);
}
} else {
//这一步是判断移动区域不为child，那么触发body的mouseup事件
$("body").trigger("mouseup");
}
}); //mouseup事件，关闭当前mousemove事件，并将定时置空
$("body").on("mouseup", function (e) {
$("body").off("mousemove");
timer = null;
});
});
}, 0);
</script>
</html>
