感谢@grisuu在评论中提供的解决方案
我能做这个：
jsfiddle

var _startX = 0;
var _startY = 0;
var _offsetX = 0;           
var _offsetY = 0;
var _dragElement;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(event){
  document.onmousemove = OnMouseMove;
    _startX = event.clientX;
  _startY = event.clientY;
  _offsetX = document.getElementById('div1').offsetLeft;
  _offsetY = document.getElementById('div1').offsetTop;
  _dragElement = document.getElementById('div1');

}

function OnMouseMove(event){
    _dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px';
  _dragElement.style.top = (_offsetY + event.clientY - _startY) + 'px';
}

function OnMouseUp(event){
  document.onmousemove = null;
  _dragElement=null;
}

html{ 
  background-color:green;
  overflow: hidden;
}

.div1{position:absolute; height:500px; width: 500px; z-index:1;}

<div class="div1" id="div1">

    <div style="height:50px;width:50px;background-color:red;"></div>
    <div style="position:absolute;top:75px;left:100px;height:50px;width:50px;background-color:blue;"></div>

  </div>

我通过编辑arsher的answer为我的个人项目实现了相同的特性，我想在这里分享我最终得到的代码。
以下是一些注意事项：

• 这段代码根本没有使用css，而是使用了scrollTo。
• 我在图像上使用draggable='false'来防止浏览器在图像上拖动功能。
• document.documentElement.scrollTop / .scrollLeft可能有一些浏览器支持问题，有很多方法可以获得文档滚动位置值，其中很多方法对我不起作用，而这一种对我起作用

/* check browser support, tested on Chrome v108
**********************************************************************/

let _startX = 0,
    _startY = 0,
    _scrollTop = 0,
    _scrollLeft = 0;

document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(event) {
    document.onmousemove = OnMouseMove;
    _startX = event.clientX;
    _startY = event.clientY;
    _scrollTop = document.documentElement.scrollTop;
    _scrollLeft = document.documentElement.scrollLeft;
}

function OnMouseMove(event) {
    window.scrollTo({
        left: _scrollLeft + (_startX - event.clientX),
        top: _scrollTop + (_startY - event.clientY)
    });
}

function OnMouseUp() {
    document.onmousemove = null;
}

<div id="wrapper">
  <div id="dragable_content">
    <img draggable='false' src="https://geology.com/world/world-map.gif" style="height:100rem;" />
  </div>
</div>