拖动屏幕滚动

Question

我正在尝试用鼠标水平/垂直拖动屏幕。我可以借助此视频实现水平拖动：https://www.youtube.com/watch?v=C9EWifQ5xqA。

我也尝试了垂直方向的类似逻辑，但不知何故它不起作用。有人可以就可能出现的问题提供一些见解吗？或者可以分享任何其他方式用鼠标垂直拖动屏幕？
这是我正在使用的代码逻辑：

const container = document.querySelector('#inventory');

    let startY;
    let startX;
    let scrollLeft;
    let scrollTop;
    let isDown;

    container.addEventListener('mousedown',e => mouseIsDown(e));  
    container.addEventListener('mouseup',e => mouseUp(e))
    container.addEventListener('mouseleave',e=>mouseLeave(e));
    container.addEventListener('mousemove',e=>mouseMove(e));

    function mouseIsDown(e){
    isDown = true;
    startY = e.pageY - container.offsetTop;
    startX = e.pageX - container.offsetLeft;
    scrollLeft = container.scrollLeft;
    scrollTop = container.scrollTop; 
    }
    function mouseUp(e){
    isDown = false;
    }
    function mouseLeave(e){
    isDown = false;
    }
    function mouseMove(e){
    if(isDown){
        e.preventDefault();
        //Move vertcally
        const y = e.pageY - container.offsetTop;
        const walkY = y - startY;
        container.scrollTop = scrollTop - walkY;

        //Move Horizontally
        const x = e.pageX - container.offsetLeft;
        const walkX = x - startX;
        container.scrollLeft = scrollLeft - walkX;

    }
    }

Answer 1

我过去曾使用过panzoom，并对此感到惊喜。我建议使用这样的库而不是手动编码。它具有增强用户体验的缓动功能。