防止背景在背景中滚动

Question

当我显示固定的全宽/高格时，我想防止滚动背景。

经过数小时的测试和研究，我这样做：

.navbar是我的全宽/高格

$('.navbar').on('shown.bs.collapse', function (e) {
  $('html, body').css('overflow', 'hidden');
})

$('.navbar').on('hide.bs.collapse', function (e) {
  $('html, body').css('overflow', 'auto');
})

它可以在某些设备上运行，但是有更好的方法吗？

谢谢

编辑：我想阻止ios上的背景滚动，只滚动整页顶部的固定div 我的解决方案可以工作，但是很好吗？

Answer 1

如果您要防止滚动整个文档正文，那么您的代码将无法在最新的iOS Safari上实现此结果。这是因为Apple出于某种原因对阻止开发人员真的很固执。但是有一种方法可以做到，我对此进行了多次测试：

1. 在阻止状态下，保存当前的var offsetTop = window.scrollTop
2. 在CSS body: {position: fixed}中设置
3. 使用JS调用：document.body.scrollTo(0, -offsetTop)

然后发布：

1. 在CSS body: {position: <relative|static>}中设置
2. 使用JS调用：document.body.scrollTo(0, 0)

这有点棘手，但是100％可以确保在每台设备上阻止滚动（直到Apple发现一种也可以阻止其滚动的方式）。