Question

我的这个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

        <div class="parallax">
            <div class="parallax__layer parallax__layer--deep">
                <img id="background" src="img/deep.png">
            </div>
            <div class="parallax__layer parallax__layer--back">
                <img id="blatt" src="img/back.png">
            </div>
            <div class="parallax__layer parallax__layer--base">
                <img id="farn" src="img/base.png">
            </div>
            <div class="parallax__layer parallax__layer--ground">
                <div id="faul">
                    <img id="sloth" src="img/y3oVSt2.png">
                </div>
            </div>
        </div>

CSS

.parallax {
   perspective: 1px;
   height: 150vh;
   overflow-x: scroll;
   overflow-y: scroll;
   margin-left: -730px;
   margin-top: -300px;
}
.parallax__layer img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.parallax__layer--ground {
    transform: translateZ(0px);
}
.parallax__layer--base {
    transform: translateZ(0px);
}
.parallax__layer--back {
    transform: translateZ(-5px) scale(2);
}
.parallax__layer--deep {
    transform: translateZ(-10px) scale(5);
}

Answer 1

这是因为您在.scrollBy()上呼叫window。相反，您要调整.scrollTop div的.scrollLeft和.parallax属性：

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;
}

查看工作小提琴：https://jsfiddle.net/uw2n0jox/3/

Answer 2

修复视差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>

Javascript鼠标移动视差div

2 个答案: