如何实现首次鼠标移动时平滑滚动到鼠标位置，后续沿用translate3d滚动？

要实现仅首次鼠标移动时平滑滚动，后续保持无过渡的translate3d滚动，可以通过动态控制元素的transition属性来实现：

1. 初始为滚动容器添加过渡效果 #

给#stage添加初始过渡样式，确保首次移动时有平滑动画：

#stage {
  /* 保留原有样式 */
  transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
}

2. 修改JS逻辑，首次移动后移除过渡 #

利用已有的initialScroll标记，在第一次mousemove触发后移除过渡属性，让后续的translate3d变化瞬间生效：

var docWidth = $("body").width(),
    slidesWidth = $("#stage").width(),
    rangeX = slidesWidth - docWidth,
    $divStage = $("#stage");

$(window).on("resize", function () {
    // 修复resize时变量更新问题，直接赋值全局变量
    docWidth = $("body").width();
    slidesWidth = $("#stage").width();
    rangeX = slidesWidth - docWidth;
});

let initialScroll = true;

$(document).mousemove(function (e) {
    var mouseX = e.pageX;
    var percentMouse = mouseX / (docWidth / 2);
    var offset = percentMouse * slidesWidth - percentMouse * docWidth;

    $divStage.css({
        transform: "translate3d(" + -(offset / 2) + "px,0,0)",
        "-webkit-transform": "translate3d(" + -(offset / 2) + "px,0,0)",
        "-moz-transform": "translate3d(" + -(offset / 2) + "px,0,0)",
        "-ms-transform": "translate3d(" + -(offset / 2) + "px,0,0)",
        "-o-transform": "translate3d(" + -(offset / 2) + "px,0,0)",
    });

    // 首次移动后移除过渡，后续滚动无平滑效果
    if (initialScroll) {
        $divStage.css({
            transition: "none",
            "-webkit-transition": "none"
        });
        initialScroll = false;
    }
}); 

关键说明 #

• 初始通过CSS添加过渡，保证第一次鼠标移动时，从初始位置到目标位置的变化有平滑动画
• 首次mousemove触发后，立即将容器过渡设为none，并切换initialScroll标记，后续的translate3d修改将无过渡，保持原生流畅性
• 修复了resize事件的变量更新问题：原代码在resize内定义局部变量，导致全局变量未同步更新，现在改为直接赋值全局变量，确保窗口大小变化后计算逻辑正确

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