Андрей812,
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Скроллинг мышью</title>
<style type="text/css">
.scroll
{ position:absolute;
top:10px;
left:100px;
height: 100px;
overflow-x: auto;
width: 200px;
cursor: all-scroll;
}
body{
position: relative;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var scr = $(".scroll"), move;
scr.mousedown(function (event) {
window.setTimeout(function() {
move = true;
},250);
var startX = this.scrollLeft + event.pageX;
var startY = this.scrollTop + event.pageY;
scr.mousemove(function (event) {
event.preventDefault();
this.scrollLeft = startX - event.pageX;
this.scrollTop = startY - event.pageY;
});
});
scr.click(function(event) {
if(move) {
event.preventDefault();
};
});
$(window).mouseup(function () {
scr.off("mousemove");
window.setTimeout(function() {
move = false;
},50);
});
}
</script>
</head>
<body>
<div class="scroll">
<a href="https://yandex.ru/"><img src="https://emn178.github.io/jquery-lazyload-any/samples/images/images/batman.png"/></a>
<a href="https://yandex.ru/"><img src="https://emn178.github.io/jquery-lazyload-any/samples/images/images/batman.png"/></a>
</div>
</body>
</html>