<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{width:600px;margin: 0 auto;height: 500px;overflow-x: auto;background: #00a7d0;}
.child{width: 1000px;height: 500px;background: #0bb20c;}
</style>
</head>
<body>
<div class="box">
<div class="child">134567892</div>
</div>
</body>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".child").on("mousedown",function(e){
let sx = e.offsetX;
let lx = $(".box").scrollLeft();
let timer;
$("body").on("mousemove",function(e1){
if(e1.target.className=="child"){
let ex = e1.offsetX;
let x = ex-sx;
if(x<0){
timer = setTimeout(function(){
$(".box").scrollLeft(lx+Math.abs(x));
},0)
}
if(x>0){
timer = setTimeout(function(){
$(".box").scrollLeft(lx-x);
},0)
}}else{
$("body").trigger("mouseup");
}
});
$("body").on("mouseup",function(e){
$("body").off("mousemove");
timer = null;
})
})
</script>
</html>
Transverse mouse to drag the scroll bar to scroll horizontally triggered
Guess you like
Origin www.cnblogs.com/xinyouhunran/p/10969115.html
Recommended
Ranking