我正在为我的网站使用 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 工作，你需要设置一个高度并设置 overflow 来滚动。两者都已设置。
如果我从 html 标签中删除 overflow: hidden css，localscroll 可以正常工作，但背景在我的 iPhone 上无法正常工作(它滚动并放大到内容的完整大小 - 而不是视口(viewport))。
有没有人有解决方案，在其中背景图片有效，而 localscroll 保持有效？
谢谢!
最佳答案
我最终为静态背景使用了一个单独的 div，这解决了我所有的问题。
然而，这在移动设备上导致了一个新问题。参见 White area on fixed background when scrolling on ios
关于jquery - 覆盖背景图片和jquery局部滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28418077/