个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我知道有几个与此类似的问题，但它们要么不适用于我的用例，要么已接受的答案存在不适合我的缺陷。所以……
我有一个包含元素列表的页面。单击列表中的一个元素将打开一个覆盖层，其中包含有关该元素的详细信息。我需要该覆盖层可滚动，但我不希望覆盖层下的其余页面滚动，以便一旦关闭覆盖层，您就处于相同位置(而且覆盖层略微透明，因此对用户来说很烦人查看下面滚动的页面，以及为什么我无法保存 scrollY 并在关闭时重置)。
现在我可以在除 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;
}
然后在我的点击处理程序中，我切换 body 上的 hidden 类，#overlay 上的 open 类，并用我的内容填充 #overlay 元素。就像我说的，除了 iOS，这在任何地方都可以正常工作。
我在其他地方看到的解决方案说我需要在 body 和/或 html 标签。此解决方案的问题是您丢失了滚动位置，并且当您关闭叠加层时您又回到了页面顶部。其中一些列表可能会很长，所以这对我来说不是一个选择。
我无法使用 preventDefault 阻止完全滚动 body 或其他东西，因为我需要覆盖内容可滚动。
还有什么建议吗？
最佳答案
目前没有办法解决这个问题。从 iOS 9.3 开始，仍然没有很好的方法来防止 body 上的滚动。我目前在所有需要它的网站上实现的最佳方法是锁定 html 和 body 的高度和溢出。
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://jerrylow.com/demo/ios-body-lock/
关于javascript - iOS - css/js - 覆盖滚动但防止 body 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37713970/
25
4
0
我有一个应用程序，其中许多对象都扩展了一个抽象类，该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑，抽象类定义了默认
我正在使用$anchorScroll滚动到页面顶部，其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
我想停用我的应用程序中的右键单击，该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情？ 最佳答案 右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
我使用 jquery 定位 div，在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
所以，我正在尝试复制 html5“占位符”属性功能。 我目前坚持的一件事是，在获得元素焦点时，插入符号立即出现在输入的开头。 就目前情况而言，插入符号出现在用户单击的位置，然后当我使用 jQuery
当表单填写并发送时，如果您刷新页面，它表示表单将再次发送。 (再次提交表格)。 防止这种情况发生的好方法是什么？或者终止这个 session ？ 这方面有什么指导吗？ 谢谢 最佳答案 处理完POST信
我想阻止 @ 被输入到 input 中。但它不起作用，知道为什么吗？ $(function() { $(document).on('keyup', '[placeholder="x"]', fun
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误，我将如何“将查询分组在一起”，检查它是否会成功，然后对真实表进行实际影响。如果对表的实际更新失败，则恢复到更新之前的状
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例，我知道 eclipse 提供了一个反编译插件。而
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(
每当我编写需要大量条件的代码时，我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
我不确定术语是否正确，您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
我正在寻找一种简单的方法来检查多个零件表，以确定给定零件号在添加到给定表之前是否已经存在。 我目前想到的最好的想法是一个辅助表，它简单地将所有表中的每个 PN 列在一个列中，并带有一个唯一的键；但是我
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡，我会解释。 我有这个:
我有一个 Spring MVC web 应用程序(不确定该信息是否重要，但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。 字符串值的形式是: d@.
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗？我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么？我确实考虑过 bbcode，但发现如果没
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类)，它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
我正在使用 Polymer 1.5，我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。 有没有一种方法可以通过重写实例变量的 __set
我是一名优秀的程序员,十分优秀！