html、css加js原生实现拖拽滚动

本案例以横向滚动为例，container里包括li，可以替换成其他行内元素

css部分

最大宽度 max-width 和nowrap是必须设置的

#container {
    cursor: grab;
    flex-wrap: nowrap;
    overflow: auto;
    max-width: 1000px;
    white-space: nowrap;
}
#container li {
    display: inline;
}

html部分

<div id="container">
    <li> item </li>
    <li> item </li>
    <li> item </li>
    <li> item </li>
    <li> item </li>
</div>

js部分

// 拖拽滚动...........
const container = document.getElementById('container');

let pos = { top: 0, left: 0, x: 0, y: 0 };

const mouseDownHandler = function (e) {
    container.style.cursor = 'grabbing';
    container.style.userSelect = 'none';// 确保用户拖拽时不复制文字

    pos = {
        left: shmooTabBox.scrollLeft,
        top: shmooTabBox.scrollTop,
        // 获取当前鼠标位置
        x: e.clientX,
        y: e.clientY,
    };

    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function (e) {
    // 鼠标移动的距离
    const dx = e.clientX - pos.x;
    const dy = e.clientY - pos.y;

    // 调整容器中内容的位置
    container.scrollTop = pos.top - dy;
    container.scrollLeft = pos.left - dx;
};

const mouseUpHandler = function () {
    container.style.cursor = 'grab';
    container.style.removeProperty('user-select');

    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

// 添加事件监听
container.addEventListener('mousedown', mouseDownHandler);
// 拖拽滚动...........