0
私は以前に話題になった質問を投稿しました。私は検証済みのコードで再転記していますが、iPhoneと互換性があります（これは私の仕事です）。方法：動的に<BODY>バックグラウンド位置を設定しますか？
背景位置の座標をiPhone、iPod、& iPadの条件付きでスクリプトを呼び出します。ここでは、これらのデバイスのための私の条件付き呼び出しがあります：今
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something
} else {
//do this
}
、私が設定し、この優れたスクリプト見つけた「トップ：xは、」動的スクロール位置に基づいて。誰も私に（そしてすべてのチュートリアルとGoogleの検索結果も）、ビューポートの問題のためにiPhone用にスクロール位置を動的に設定することは不可能だと教えてくれました。あなたはページの一番下までスクロールし、iPhone上でこのJavaScriptのデモを表示する場合、あなたはスクロールできると
<div style="background-position: fixed; top: x (variable)"></div>
div要素は、iPhoneを中心に滞在しないためしかし、彼らは間違っています。私は本当にこの質問が人々の多くを助けることを願っています、私はそれが不可能だと思ったが、それはない...私はそれを一緒にステッチングする必要があります！
元のコード（あなたはiPhone上でそれを自分でテストすることができます）ここにある： http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
** EDIT：参考のため、ここでは動的「：Xトップ」を適用することにより、絶対位置自体をDOES divがあります要素（でもiPhone上）のように：
http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/ **
だから、僕は動的「のbackground-position：0 X」を適用するには、次のコードを取得して助けが必要なBODY xが中央に配置されたタグと相対にしますビューポートの位置に移動します。また、上記のコードの中に入れ子にする必要があります。これはiPhoneや同様のデバイスの条件付きです。
// Page Size and View Port Dimension Tools
// http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
if (!sb_windowTools) { var sb_windowTools = new Object(); };
sb_windowTools = {
scrollBarPadding: 17, // padding to assume for scroll bars
// EXAMPLE METHODS
// center an element in the viewport
centerElementOnScreen: function(element) {
var pageDimensions = this.updateDimensions();
element.style.top = ((this.pageDimensions.verticalOffset() + this.pageDimensions.windowHeight()/2) - (this.scrollBarPadding + element.offsetHeight/2)) + 'px';
element.style.left = ((this.pageDimensions.windowWidth()/2) - (this.scrollBarPadding + element.offsetWidth/2)) + 'px';
element.style.position = 'absolute';
},
// INFORMATION GETTERS
// load the page size, view port position and vertical scroll offset
updateDimensions: function() {
this.updatePageSize();
this.updateWindowSize();
this.updateScrollOffset();
},
// load page size information
updatePageSize: function() {
// document dimensions
var viewportWidth, viewportHeight;
if (window.innerHeight && window.scrollMaxY) {
viewportWidth = document.body.scrollWidth;
viewportHeight = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) {
// all but explorer mac
viewportWidth = document.body.scrollWidth;
viewportHeight = document.body.scrollHeight;
} else {
// explorer mac...would also work in explorer 6 strict, mozilla and safari
viewportWidth = document.body.offsetWidth;
viewportHeight = document.body.offsetHeight;
};
this.pageSize = {
viewportWidth: viewportWidth,
viewportHeight: viewportHeight
};
},
// load window size information
updateWindowSize: function() {
// view port dimensions
var windowWidth, windowHeight;
if (self.innerHeight) {
// all except explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// explorer 6 strict mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
// other explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
};
this.windowSize = {
windowWidth: windowWidth,
windowHeight: windowHeight
};
},
// load scroll offset information
updateScrollOffset: function() {
// viewport vertical scroll offset
var horizontalOffset, verticalOffset;
if (self.pageYOffset) {
horizontalOffset = self.pageXOffset;
verticalOffset = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
// Explorer 6 Strict
horizontalOffset = document.documentElement.scrollLeft;
verticalOffset = document.documentElement.scrollTop;
} else if (document.body) {
// all other Explorers
horizontalOffset = document.body.scrollLeft;
verticalOffset = document.body.scrollTop;
};
this.scrollOffset = {
horizontalOffset: horizontalOffset,
verticalOffset: verticalOffset
};
},
// INFORMATION CONTAINERS
// raw data containers
pageSize: {},
windowSize: {},
scrollOffset: {},
// combined dimensions object with bounding logic
pageDimensions: {
pageWidth: function() {
return sb_windowTools.pageSize.viewportWidth > sb_windowTools.windowSize.windowWidth ?
sb_windowTools.pageSize.viewportWidth :
sb_windowTools.windowSize.windowWidth;
},
pageHeight: function() {
return sb_windowTools.pageSize.viewportHeight > sb_windowTools.windowSize.windowHeight ?
sb_windowTools.pageSize.viewportHeight :
sb_windowTools.windowSize.windowHeight;
},
windowWidth: function() {
return sb_windowTools.windowSize.windowWidth;
},
windowHeight: function() {
return sb_windowTools.windowSize.windowHeight;
},
horizontalOffset: function() {
return sb_windowTools.scrollOffset.horizontalOffset;
},
verticalOffset: function() {
return sb_windowTools.scrollOffset.verticalOffset;
}
}
};