程序员经验分享-hwhale

iOS - css/js - 覆盖滚动但阻止正文滚动

2024-03-09

我知道有一些与此类似的问题，但它们要么不适合我的用例，要么接受的答案有一个缺陷，不适合我。所以...

我有一个包含元素列表的页面。单击列表中的元素将打开一个覆盖层，其中包含有关该元素的详细信息。我需要该覆盖层可滚动，但我不希望覆盖层下的页面其余部分滚动，以便一旦覆盖层关闭，您就处于相同的位置（而且覆盖层稍微透明，因此对用户来说很烦人）查看下面的页面滚动，也是为什么我无法保存滚动并在关闭时重置）。

现在除了 iOS 之外我到处都可以工作。这基本上就是我所拥有的：

<html>
   <body>
      <ul id="list">
         <li>something 1</li>
         <li>something 2</li>
         <li>something 3</li>
         <li>something 4</li>
         <li>something 5</li>
      </ul>
      <div id="overlay"></div>
   </body>
</html>

CSS:

body.hidden {
   overflow: hidden;
}
#overlay {
   opacity: 0;
   top: -100vh;
}
#overlay.open {
   opacity: 1;
   overflow-y: scroll;
   overflow-x: hidden;
   top: 0;
}

然后在我的点击处理程序中我切换hidden上课body, the open上课#overlay，并填充#overlay元素与我的内容。就像我说的，除了 iOS 之外，这在任何地方都可以正常工作。

我看到其他地方说我需要使用的解决方案position:fixed and height:100% on the body and/or html标签。此解决方案的问题是您会丢失滚动位置，并且当您关闭覆盖层时，您会回到页面顶部。其中一些列表可能非常长，因此这对我来说不是一个选择。

我无法完全阻止滚动preventDefault在身体或其他东西上，因为我需要覆盖内容可滚动。

还有其他建议吗？


目前没有办法解决这个问题。从 iOS 9.3 开始，仍然没有好的方法来阻止 body 上的滚动。我目前在所有需要它的网站上实现的最佳方法是锁定 html 和正文的高度和溢出。

html, body {
  height: 100%;
  overflow: hidden;
}

这是防止 iOS 滚动覆盖层/模式后面的内容的最佳方法。

然后为了保留滚动位置，我将内容向后移动，看​​起来像是保留它，然后当模式关闭时恢复主体的位置。

我用 jQuery 中的锁定和解锁功能来做到这一点

var $docEl = $('html, body'),
  $wrap = $('.content'),
  $.scrollTop;

$.lockBody = function() {
  if(window.pageYOffset) {
    scrollTop = window.pageYOffset;

    $wrap.css({
      top: - (scrollTop)
    });
  }

  $docEl.css({
    height: "100%",
    overflow: "hidden"
  });
}

$.unlockBody = function() {
  $docEl.css({
    height: "",
    overflow: ""
  });

  $wrap.css({
    top: ''
  });

  window.scrollTo(0, scrollTop);
  window.setTimeout(function () {
    scrollTop = null;
  }, 0);
}

当你把所有这些拼凑在一起时，你会得到http://codepen.io/jerrylow/pen/yJeyoG http://codepen.io/jerrylow/pen/yJeyoG如果您想在手机上测试它，结果如下：http://jerrylow.com/demo/ios-body-lock/ http://jerrylow.com/demo/ios-body-lock/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

iOS - css/js - 覆盖滚动但阻止正文滚动 的相关文章

随机推荐

热门标签