使用位置时保存滚动位置：固定以防止在 iphone 上滚动身体

Question

我想要做的是让它在移动菜单打开时不再滚动身体，但页面上的位置被保存，以便当身体的位置再次固定和不固定时，用户不会'不要失去他们在页面上的位置。

当我在 iphone 的 Chrome dev-tool 模拟器中尝试时，下面的工作完美无缺，但它不适用于我的实际 iphone SE（在 Chrome 和 Safari 上）。 有没有人知道为什么会这样？

 function storeBodyScroll() { var scrollpos = $('html').scrollTop(); $('body').css({top: -scrollpos}); } function closeMenu() { // See if the body's scroll position is being held var scrollpos = parseInt($('body').css('top'), 10); $('body').removeClass('mobile-menu-open'); // Scroll to it if it is and remove held position if (!!scrollpos && scrollpos < 0) { $('html').scrollTop(-scrollpos); $('body').css({top:0}); } } function openMenu() { storeBodyScroll(); $('body').addClass('mobile-menu-open'); }

 body.mobile-menu-open { position: fixed; overflow-y: scroll; }

Answer 1

按照我在 iphone 上的预期方式完成这项工作实际上是一个简单的修复：似乎 $('html').scrollTop() 没有返回我期望的值。

相反，我用 $(window).scrollTop() 替换了 $('html').scrollTop()，并用 window.scrollTo(0,scrollpos) 替换了 $('html').scrollTop(-scrollpos)。