javascript - 如何: Dynamically set background-position?

Question

我之前发布了一个偏离主题的问题，我重新发布了更好的代码，我已经验证它与 iPhone 兼容(无论如何它都适用于我的!)

我只想将背景位置坐标应用于 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”的优秀脚本。每个人都告诉我(以及所有教程和谷歌搜索结果)由于视口(viewport)问题，不可能为 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/

**编辑:作为引用，这里是通过动态应用“top:x”元素来绝对定位自身的 div(即使在 iPhone 上):

http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/ **

所以我只需要帮助获取以下代码以将动态“背景位置:0 x”应用到 BODY 标签，其中 x 居中并相对于视口(viewport)位置。另外，需要嵌套在上面的代码中，这对于 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;
        }
    }
};

Answer 1

 <?php

/* detect Mobile Safari */

$browserAsString = $_SERVER['HTTP_USER_AGENT'];

if (strstr($browserAsString, " AppleWebKit/") && strstr($browserAsString, " Mobile/"))
{
    $browserIsMobileSafari = true;

 echo 
 " 
 <script>
 $(document).ready(function() {
  $(window).scroll(function() {
   windowPosition = $(this).scrollTop();
   $('body').stop().animate({'backgroundPositionY' : windowPosition+'px'}, 500);
  });
 });

 </script>   
 "
;} ?>