Javascript鼠标移动视差div

我对这个javascript有一个问题。在我的网站上有一个视差div，如果我移动鼠标，它就会滚动。到目前为止，这个脚本仍然有效，但它在主体上滚动，而不是像它应该的那样在视差div上滚动

var x, y;
function handleMouse(e) {
  if (x && y) {
    window.scrollBy(e.clientX - x, e.clientY - y);
  }
  x = e.clientX;
  y = e.clientY;
}
document.onmousemove = handleMouse;

HTML

---

这是因为您正在调用

窗口上的
.scrollBy（）
。相反，您需要调整
视差div的
.scrollTop
和
.scrollLeft
属性：

var speed = 5 //adjust to change parallax scroll speed
var x, y;
function handleMouse(e) {
  if (x && y) {
    document.getElementsByClassName("parallax")[0].scrollTop += speed*(e.clientY - y);
    document.getElementsByClassName("parallax")[0].scrollLeft += speed*(e.clientX - x);
  }
  x = e.clientX;
  y = e.clientY;
}
document.onmousemove = handleMouse;

您可能还希望在鼠标离开窗口时重置x和y，否则，如果鼠标从左侧离开，然后从右侧重新进入，则可能会发生跳跃：

document.onmouseleave = function() {
  x = undefined;
  y = undefined;
}

检查工作小提琴：
固定视差div。
这样地。。。。因为你必须让它在视差div上滚动

<div class="bg" style="background:url('image/banner.png') repeat;position:fixed;width: 100%;height:300%;top:0;left:0;z-index:-1;"> </div>   


发布JSFIDLE或使用stackoverflow的javascriot解释器FIDLE会很有用，但这是因为您在
窗口上调用
.scrollBy（）
？这将导致窗口滚动，而不是
.parallax
div。我创建了一个小提琴：当你移动鼠标时，它应该具有你用鼠标滚轮滚动时所达到的效果。谢谢
document.onmouseleave = function() {
  x = undefined;
  y = undefined;
}

<div class="bg" style="background:url('image/banner.png') repeat;position:fixed;width: 100%;height:300%;top:0;left:0;z-index:-1;"> </div>