視差スクロールを使用した概念実証サイトを行っています。ページの右側に、この単一ページのサイトをナビゲートするためのアンカーにリンクする 3 つの画像があります。#buttons div を視差コンテナー内に配置すると、ボタンがスクロールしてページの下部にリンクが残ります。それらをそのdivの外に置いておくと、位置を固定するように設定してもスクロールします。FFでは完璧に機能しますが、クロムでは機能しません。必要なのは、パララックス スクロールを備えたシンプルなページと、ページの右側にある 3 つのボタンだけです。これらのボタンは、スクロールした場所に関係なく、画面上の同じ位置に保持されます。クロムではなくFFで動作するのはなぜですか? 私のコードは以下です
<!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>