Question

我在我的网站上使用bootstrap并使localscroll正常工作（我使用标准导航条形码）。到目前为止一切都很好。

接下来，我想实现一个在桌面和移动设备（iphone，android等）上正常运行的全屏背景。背景图片应覆盖整个屏幕，当用户滚动页面内容时不应移动。我能找到的唯一解决方案（经过长时间的搜索）是这样的：

html {
    background: url('images/ny-building-xs-optimized.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on ios */
}

这很棒！

现在，如果我将此全屏幕背景css与localscroll结合使用。 Localscroll停止工作。这很奇怪，因为我在某处读到为了让localscroll工作，你需要设置一个高度并设置溢出来滚动。两者都已设定。

如果我从html标签中移除溢出：隐藏的CSS而不是localscroll，但背景在我的iphone上无法正常工作（它会滚动并放大到内容的完整大小 - 而不是视口）。

有没有人有一个解决方案，其中背景图片工作，localscroll继续工作？

谢谢！

Answer 1

我最终使用了一个分离的div作为静态背景，解决了我的所有问题。

然而，这导致了移动设备上的新问题。见EXIT %ERRORLEVEL%

覆盖背景img和jquery localscroll

1 个答案: