将jQuery代码转为原生JS：寻找scrollTop与scrollLeft等效写法

嘿，我来帮你搞定这段代码的转换！先解决你最关心的滚动逻辑，再给你完整的原生JS版本。

核心滚动代码的原生等效写法 #

你提到的这两行jQuery代码：

$(window).scrollTop($(window).scrollTop() + (curYPos - m.pageY));
$(window).scrollLeft($(window).scrollLeft() + (curXPos - m.pageX));

在原生JavaScript中，我们需要用window.scrollTo()方法来同时设置水平和垂直滚动位置（原生没有直接的scrollTop/scrollLeft setter方法）。对应的等效代码如下：

// 计算新的滚动坐标
const newVerticalScroll = window.scrollY + (curYPos - m.pageY);
const newHorizontalScroll = window.scrollX + (curXPos - m.pageX);
// 应用滚动
window.scrollTo(newHorizontalScroll, newVerticalScroll);

或者可以简化为一行：

window.scrollTo(window.scrollX + (curXPos - m.pageX), window.scrollY + (curYPos - m.pageY));

完整的原生JavaScript代码 #

下面是把你的整个jQuery代码转换后的版本，功能和原代码完全一致：

document.addEventListener('DOMContentLoaded', function() {
  let curDown = false, curYPos = 0, curXPos = 0;

  window.addEventListener('mousemove', function(m) {
    if (curDown === true) {
      window.scrollTo(
        window.scrollX + (curXPos - m.pageX),
        window.scrollY + (curYPos - m.pageY)
      );
    }
  });

  window.addEventListener('mousedown', function(m) {
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });

  window.addEventListener('mouseup', function() {
    curDown = false;
  });
});

关键替换说明 #

• DOM就绪事件：jQuery的$(function(){})替换为document.addEventListener('DOMContentLoaded', ...)，确保DOM加载完成后再执行代码
• 事件绑定：$(window).mousemove()等jQuery事件绑定，替换为原生的window.addEventListener('事件名', 处理函数)
• 滚动位置获取：$(window).scrollTop() → window.scrollY，$(window).scrollLeft() → window.scrollX
• 滚动位置设置：用原生的window.scrollTo(x, y)方法替代jQuery的scrollTop()/scrollLeft()设置方法

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