html拖动滚动

<div id="container" class="container">...div>

元素必须至少有两个 CSS 属性：

.container {
    cursor: grab;
    overflow: auto;
}

cursor: grab表示可以单击和拖动元素。

滚动到给定位置

const ele = document.getElementById('container');
ele.scrollTop = 100;
ele.scrollLeft = 150;

拖动滚动

let pos = { top: 0, left: 0, x: 0, y: 0 };
 
const mouseDownHandler = function (e) {
    pos = {
        // The current scroll
        left: ele.scrollLeft,
        top: ele.scrollTop,
        // Get the current mouse position
        x: e.clientX,
        y: e.clientY,
    };
 
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

pos存储当前滚动和鼠标位置。当用户移动鼠标时，我们计算它已经移动了多远，然后滚动到元素到相同的位置：

const mouseMoveHandler = function (e) {
    // How far the mouse has been moved
    const dx = e.clientX - pos.x;
    const dy = e.clientY - pos.y;
 
    // Scroll the element
    ele.scrollTop = pos.top - dy;
    ele.scrollLeft = pos.left - dx;
};

最后但同样重要的是，我们可以通过在用户开始移动鼠标时设置一些 CSS 属性来改善用户体验：

const mouseDownHandler = function(e) {
    // Change the cursor and prevent user from selecting the text
    ele.style.cursor = 'grabbing';
    ele.style.userSelect = 'none';
    ...
};

释放鼠标时，这些 CSS 属性会被重置：

const mouseUpHandler = function () {
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
 
    ele.style.cursor = 'grab';
    ele.style.removeProperty('user-select');
};