Question

我的身高为1000像素，屏幕高度为100像素。我希望显示占据整个<div>宽度和<body>高度的<body>。那个<div>有一个background-image，我希望它显示在视口的中间。我怎样才能使用Javascript实现这一目标。

我使用了以下概念，但它在移动设备中对我不起作用

  ele.style.backgroundPosition = document.body.scrollTop + 
                                 (window.innerHeight / 2) - heightOfImage;

Answer 1

最简单的解决方案可能是固定定位<div />并在其上设置背景图像，并设置z-index，使其显示在页面上的所有其他元素下。

如果你确实想要使用JavaScript路线（如果我能帮助它，我个人不会这样做），你将不得不做这些事情：

var verticalPosition = document.body.scrollTop + (window.innerHeight / 2) - heightOfImage;

ele.style.backgroundPosition = 'center ' + verticalPosition + 'px';

请注意添加'px'，因为这很重要。 “中心”之后还有一个空格，所以你应该得到这样的东西：ele.style.backgroundPosition = 'center 50px'。

示例（使用Zepto或jQuery）：http://jsfiddle.net/7aqgG/7/