我正在做一个带有视差滚动的概念验证网站。我在页面右侧有 3 张图片，它们链接到锚点来导航这个单页网站。如果我将#buttons div 放在视差容器中，按钮会滚动并将链接留在页面底部。如果我将它们留在该 div 之外，即使我将位置设置为固定，它们也会滚动。它在 FF 中完美运行，但不适用于 chrome。我所需要的只是一个带有视差滚动的简单页面，以及页面右侧的三个按钮，无论您滚动到哪里，它们都保持在屏幕上的相同位置。为什么它适用于 FF 而不是 chrome？我的代码如下
<!DOCTYPE html>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta charset="utf-8">
<meta content="A high performance parallax scrolling example." name="description">
<meta content="Parallax Scrolling Example" name="title">
<title>Parallax Scrolling Example</title>
<style>
body {
padding: 45px;
background-color: #010001;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
line-height: 40px;
padding: 30px;
margin-right: 60px;
color: #FFFFFF;
}
p span {
background-color: rgba(1, 0, 1, .85);
}
a {
color: #AFDBF2;
}
h1 {
text-transform: capitalize;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
font-size: 40px;
padding: 10px;
margin: 0px;
background-color: rgba(178, 45, 0, .75);
color: #EEE;
}
#parallaxContainer {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
#parallaxContainer img {
width: 100%;
height: auto;
}
#buttons {
position:fixed;
bottom:100px;
right:10px;
}
</style>
</head>
<body>
<div id="parallaxContainer">
<img src="http://4.bp.blogspot.com/_2mN0xk6r-Eo/TEh9lXrojWI/AAAAAAAAAuk/mDn5MDGetBE/s1600/0014.jpg">
</div>
<div id="buttons">
<div id="button1"><a href="#anch1"><img src="images/button.png"></a></div>
<div id="button2"><a href="#anch2"><img src="images/button.png"></a></div>
<div id="button3"><a href="#anch3"><img src="images/button.png"></a></div>
</div>
<div id="content">
<h1>Some Random Star Trek Quotes</h1>
<p><span>Captain Jean-Luc Picard: Duty. A starship captain's life is filled with solemn duty. I have commanded men in battle. I have negotiated peace treaties between implacable enemies. I have represented the Federation in first contact with twenty-seven alien species. But none of this compares with my solemn duty today... as best man. Now, I know, on an occasion such as this, it is expected that I be gracious and fulsome in my praise on the wonders of this blessed union, but have the two of you considered what you were doing to me? Of course you're happy, but what about *my* needs? This is all a damned inconvenience. While you're happily settling in on the Titan, I will be training my new first officer. You all know him. He's a tyrannical martinet who will never, *ever*, allow me to go on away missions.
Data: That is the regulation, sir. Starfleet code section 12, paragraph 4...
Captain Jean-Luc Picard: Mr. Data...
Data: Sir?
Captain Jean-Luc Picard: Shut up.
Data: Yes, sir.
Captain Jean-Luc Picard: [turning to the wedding guests] 15 years I've been waiting to say that. </p></span></p>
<br>
</div>
<script src="http://www.kirupa.com/prefixfree.min.js"></script>
<script>
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var transforms = ["transform",
"msTransform",
"webkitTransform",
"mozTransform",
"oTransform"];
var transformProperty = getSupportedPropertyName(transforms);
var imageContainer = document.querySelector("#parallaxContainer");
var scrolling = false;
var mouseWheelActive = false;
var count = 0;
var mouseDelta = 0;
//
// vendor prefix management
//
function getSupportedPropertyName(properties) {
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style[properties[i]] != "undefined") {
return properties[i];
}
}
return null;
}
function setup() {
window.addEventListener("scroll", setScrolling, false);
// deal with the mouse wheel
window.addEventListener("mousewheel", mouseScroll, false);
window.addEventListener("DOMMouseScroll", mouseScroll, false);
animationLoop();
}
setup();
function mouseScroll(e) {
mouseWheelActive = true;
// cancel the default scroll behavior
if (e.preventDefault) {
e.preventDefault();
}
// deal with different browsers calculating the delta differently
if (e.wheelDelta) {
mouseDelta = e.wheelDelta / 120;
} else if (e.detail) {
mouseDelta = -e.detail / 3;
}
}
//
// Called when a scroll is detected
//
function setScrolling() {
scrolling = true;
}
//
// Cross-browser way to get the current scroll position
//
function getScrollPosition() {
if (document.documentElement.scrollTop == 0) {
return document.body.scrollTop;
} else {
return document.documentElement.scrollTop;
}
}
//
// A performant way to shift our image up or down
//
function setTranslate3DTransform(element, yPosition) {
var value = "translate3d(0px" + ", " + yPosition + "px" + ", 0)";
element.style[transformProperty] = value;
}
function animationLoop() {
// adjust the image's position when scrolling
if (scrolling) {
setTranslate3DTransform(imageContainer,
-1 * getScrollPosition() / 2);
scrolling = false;
}
// scroll up or down by 10 pixels when the mousewheel is used
if (mouseWheelActive) {
window.scrollBy(0, -mouseDelta * 10);
count++;
// stop the scrolling after a few moments
if (count > 20) {
count = 0;
mouseWheelActive = false;
mouseDelta = 0;
}
}
requestAnimationFrame(animationLoop);
}
</script>
</body>
</html>