Исправил для работы в IE9+ и позаимствовал учет соотношения ширина документа / ширина окна
<!DOCTYPE html>
<head>
<title></title>
<style>
#page{
width: 3200px;
height: 1000px;}
</style>
</head>
<body>
<div id="page">
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
</div>
<script>
function DragHandler() {
this.lastClientX = 0;
this.onResize = function (e) {
this.ratio = (document.body.scrollWidth - document.body.offsetWidth ) / document.body.offsetWidth;
}.bind(this);
this.onMouseDown = function (e) {
if (e.button == 0) {
window.addEventListener('mousemove', this.onMouseMove);
this.lastClientX = e.clientX;
e.preventDefault();
}
}.bind(this);
this.onMouseUp = function (e) {
if (e.button == 0) {
window.removeEventListener('mousemove', this.onMouseMove);
}
}.bind(this);
this.onMouseMove = function (e) {
var delta = (e.clientX - this.lastClientX) * this.ratio;
window.scrollTo(window.pageXOffset - delta, window.pageYOffset);
this.lastClientX = e.clientX;
}.bind(this);
document.body.addEventListener('mousedown', this.onMouseDown);
document.addEventListener('mouseup', this.onMouseUp);
window.addEventListener('resize', this.onResize);
this.onResize();
}
new DragHandler();
</script>
</body>