使用 jQuery 将 <body> 位置设置为固定时避免返回到页面顶部
Posted
技术标签:
【中文标题】使用 jQuery 将 <body> 位置设置为固定时避免返回到页面顶部【英文标题】：Avoid reverting to top of page when setting <body> position to fixed with jQuery 【发布时间】：2016-01-01 12:55:36 【问题描述】：当用户点击某个按钮时，我在我的页面上使用了一个固定的覆盖 div 来显示额外的内容。
这样做的问题在于，在 ios 上，后面的内容倾向于滚动而不是覆盖 div。
我发现的唯一有效解决方案是使用 jQuery 来更改类并将其位置切换为固定（和溢出：隐藏），只要选择显示覆盖 div（然后在关闭覆盖时再次返回） ）。例如
$(document).ready(function()
$("#filter-btn, .close-filter").click(function()
$("body").toggleClass("fix");
);
);
虽然这有效，但它也会导致正文中的内容在更改为“固定”到顶部时移动到页面顶部，而固定覆盖 div 淡入时可见。
有没有办法阻止这种情况发生？
【问题讨论】：
通常只需将体高设置为 100% 和overflow:hidden 即可
谢谢 - 但是在这种情况下似乎不起作用。
您是否删除了position:fixed？最好的建议是查看其他叠加层并检查它们是如何做到的......方法通常是相同的
啊哈，成功了。老实说，我以为我已经尝试过了，但显然没有。 :)
@J.Doe - 只是好奇，你是说设置height: 100%; overflow: hidden 阻止了正文向上滚动，并且还阻止了内容从覆盖中滚动（假设你在顶部/底部覆盖并继续滑动/拖动？）
【参考方案1】：
这通常可以通过将 body height 设置为 100% 和 overflow:hidden 在应用于 body 的类的 css 规则中解决
【讨论】：
我已经尝试了一些东西，但这肯定是行不通的。我能想到的只是一个基于 JS 的解决方案，但我不太确定如何。 创建复制这个的演示 但是你使用fixed作为body ...为什么？
只是让叠加层后面的内容在打开时不会滚动。我相信这是一个 ios 问题。以上是关于使用 jQuery 将 <body> 位置设置为固定时避免返回到页面顶部的主要内容，如果未能解决你的问题，请参考以下文章
将带有 jquery 的 html 模板转换为 React js