Dar*_*rek 8 html css safari address-bar ios
我们的应用程序使用固定定位的视图来实现良好的导航转换。在最近的 iOS (15) 更新中，地址栏移至设备底部。由于我们使用固定定位和嵌套滚动（主体不可滚动，高度：100% 等于设备高度），因此我们没有获得滚动时折叠地址栏的默认行为。有什么办法可以解决这个问题吗？复制此问题所需的最少代码如下：
<html>
<style>
body {
overflow: hidden;
height: 100%;
}
div {
position: fixed;
overflow: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 40px;
}
</style>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin iaculis dictum. Phasellus in purus in risus volutpat tempor et id lectus. Aenean sodales odio at magna pellentesque mollis. Aenean bibendum lacus eu diam ornare dapibus. Maecenas nunc sapien, facilisis eu blandit bibendum, tempus ut lacus. Curabitur dui ipsum, malesuada sit amet condimentum non, gravida id lacus. Nulla elementum euismod euismod. Aliquam ac felis turpis. Sed accumsan leo arcu, eget suscipit felis tempor vel. Quisque vel nunc eget quam rutrum pulvinar at in libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sodales sem ac purus maximus, tempor porta leo pharetra. Cras vitae eleifend ex. Duis ipsum ex, ornare sed enim hendrerit, porta vestibulum risus. Nam eu maximus ante, ut viverra urna. Cras convallis scelerisque dolor. Quisque varius massa at odio faucibus lacinia. Nunc pharetra fringilla arcu luctus rutrum. Nullam vel sapien ipsum. Maecenas scelerisque cursus dui ut sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Maecenas volutpat sodales odio, quis condimentum nisl fringilla et. Phasellus tincidunt, arcu ac mattis volutpat, libero sapien interdum felis, eget lobortis ex velit nec nisl. Pellentesque dictum pellentesque rhoncus. Pellentesque facilisis nibh ex, eget aliquam lacus condimentum eget. Proin vel fermentum enim. Integer rutrum sodales neque rutrum congue. Pellentesque non odio lobortis, congue lacus vitae, egestas nulla. Proin pellentesque interdum nibh, nec lobortis ex pulvinar eget. Quisque egestas arcu vel efficitur consequat.
Curabitur eros elit, euismod in fringilla in, commodo sed arcu. Cras varius porttitor nibh, eget tincidunt mauris tincidunt ac. Proin id lacinia eros, vel rutrum sapien. Curabitur ac felis sed mauris pellentesque molestie et in nisi. Cras sed tincidunt massa. Nulla ullamcorper urna eget ipsum accumsan interdum. Sed et lacus sit amet purus faucibus faucibus. Quisque fringilla posuere tellus in dapibus. Aliquam vehicula ultrices auctor. Etiam cursus efficitur felis. Fusce sit amet nisi leo. Ut eget urna consectetur, venenatis mauris eu, bibendum risus. Aliquam bibendum, nisl sit amet aliquet tempor, metus dolor faucibus ligula, quis rhoncus diam purus nec dolor. Phasellus pellentesque vehicula massa eu lacinia.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras a condimentum ex. Morbi accumsan eros sit amet dolor sodales, vel cursus orci porttitor. Phasellus varius urna id erat suscipit, et eleifend nisi facilisis. Maecenas eget sem tempor, tincidunt enim in, elementum lacus. Donec eu aliquet tellus, non varius ante. Integer blandit sagittis metus, ac ultricies nisi. Cras tempus nisl et vehicula ultricies. Sed id elementum sapien. Proin scelerisque ante sed tellus rhoncus, blandit egestas erat ultrices. Suspendisse eget ante elementum, condimentum velit lobortis, lacinia dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</div>
</body>
</html>
如果您在 iOS 模拟器 safari（或您的设备）中打开它，您将能够上下滚动，但地址栏不会受到影响。overflow: hidden;但是，如果您从 body 和position: fixed; overflow: scroll;div 中删除，您将看到地址栏随着滚动而很好地折叠。
有没有办法通过嵌套卷轴来解决这个问题？
每当固定元素滚动时，您都可以尝试滚动窗口。注意：setTimeout 很重要。删除它可能会导致意外行为。
const element = document.getElementbyId("content");
var lastScrollTop = 0;
element.addEventListener("scroll", function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
} else {
// upscroll code
setTimeout(function(){
// Show the address bar!
window.scrollTo(0, 0);
}, 0);
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
| 归档时间： |
|
| 查看次数： |
2042 次 |
| 最近记录： |