Fullcalendar Scheduler横向拖拽滚动画布功能实现求助

你的问题出在没有基于当前滚动位置来计算偏移量，原来的代码每次mousemove都直接用初始的e.pageX减去当前evt.clientX作为scrollLeft的值，这会导致滚动位置被强制重置到一个固定差值，而不是在原有基础上累加偏移。

我来帮你调整代码，核心是在鼠标按下时记录两个关键状态：当前的滚动位置，以及初始的鼠标坐标，然后在移动时计算鼠标的偏移量，再更新滚动位置：

// 定义变量存储初始状态
let startScrollLeft;
let startPageX;

$('.fc-scroller-canvas').on('mousedown', function(e) {
    // 记录初始滚动位置和鼠标X坐标
    startScrollLeft = $('.fc-scroller').scrollLeft();
    startPageX = e.pageX;
    
    // 阻止默认行为，避免选中文本或触发其他冲突事件
    e.preventDefault();

    $('.fc-scroller-canvas').on('mousemove', function(evt) {
        // 计算鼠标移动的差值：初始X - 当前X
        const deltaX = startPageX - evt.pageX;
        // 新的滚动位置 = 初始滚动位置 + 差值（拖拽方向和滚动方向相反）
        $('.fc-scroller').scrollLeft(startScrollLeft + deltaX);
    });
});

$('.fc-scroller-canvas').on('mouseup mouseleave', function() {
    // 移除mousemove事件，同时处理鼠标离开画布的情况
    $('.fc-scroller-canvas').off('mousemove');
});

另外，建议给.fc-scroller-canvas添加CSS样式，优化拖拽时的用户体验：

.fc-scroller-canvas {
    user-select: none;
    cursor: grab;
}
.fc-scroller-canvas:active {
    cursor: grabbing;
}

关键修复点说明： #

• 记录初始状态：在mousedown时保存当前的scrollLeft和鼠标初始位置，确保后续计算是基于拖拽开始时的状态，不会出现跳回初始位置的问题。
• 计算偏移量：用startPageX - evt.pageX得到鼠标移动的水平差值，这个差值就是画布需要滚动的距离（鼠标往左拖，画布需要往右滚，所以直接加到初始滚动位置上）。
• 优化事件解绑：同时监听mouseup和mouseleave事件，避免鼠标移出画布后还能继续拖拽的异常情况。
• 交互体验优化：添加鼠标样式和文本选择禁用，让拖拽操作更直观自然。

你可以试试这个方案，应该就能正常实现横向拖拽滚动的效果了。

内容的提问来源于stack exchange，提问作者Jose