0
내가 주제를 벗어난 이전에 질문을 올렸습니다. 확인한 코드로 다시 게시합니다. iPhone과 호환됩니다. (어쨌든 광산에서 작동합니다!)방법 : 동적으로 <BODY> 배경 위치를 설정 하시겠습니까?
배경 위치 좌표를 body 요소를 호출하고 iPhone, iPod, & iPad에 조건부로 스크립트를 호출하십시오. 다음은 해당 장치에 대한 조건부 호출입니다.
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something
} else {
//do this
}
이제는 스크롤 위치를 기준으로 "top : x"를 동적으로 설정하는 훌륭한 스크립트를 발견했습니다. 모두는 저와 뷰포트 문제로 인해 iPhone에서 스크롤 위치를 동적으로 설정할 수 없다는 자습서와 Google 검색 결과를 모두 알려 줬습니다. 당신이 페이지 하단으로 스크롤하여 아이폰이 자바 스크립트 데모를 볼 경우, 스크롤 할 수 있고
<div style="background-position: fixed; top: x (variable)"></div>
사업부는 아이폰을 중심으로 유지 않기 때문에, 그들은 잘못입니다. 나는이 질문이 사람들에게 많은 도움이되기를 바란다. 나는 불가능하다고 생각했지만, 그렇지 않다. 나는 그것을 함께 묶는 데 도움이 필요하다! 원래 코드는 (당신이 아이폰 스스로를 테스트 할 수 있습니다)
는여기에 있습니다 : http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
** 편집 : "최고 : X"참고로, 여기에 동적으로 적용하여 절대 위치 자체를 수행하는 사업부입니다 요소 (심지어 아이폰)와 같은 :
http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/ **
그래서 난 그냥 동적 "배경 위치 : 0 x"를 적용하려면 다음 코드를하는 데 도움이 필요 신체 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;
}
}
};