在Safari iOS 15中的固定位置视图上隐藏地址栏15

发布于 2025-02-01 18:59:01 字数 3761 浏览 3 评论 0原文

我们的应用程序使用固定的位置视图以实现良好的导航过渡。在最近的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 Simulator Safari（或您的设备）中打开该问题，则可以上下滚动，但是地址栏将不会受到影响。但是，如果您将删除溢出：隐藏;从身体和位置：固定；溢出：滚动;在DIV中您会看到地址栏与滚动曲线很好地折叠。

有没有办法通过嵌套卷轴来解决此问题？

原文

Our app uses fixed positioned views in order to achieve nice navigation transitions. In the recent update for iOS (15) the address bar went to the bottom of the device.
Since we're using fixed positioning and nested scrolls (body is not scrollable with height: 100% equal to the device height), we're not getting the default behaviour of collapsing the address bar when scrolling. Is there any way to fix that?
The minimum code necessary to replicate this issue is here:

<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>

If you open that in the iOS simulator safari (or your device) you will be able to scroll up and down, but the address bar will not be affected. But if you will remove the overflow: hidden; from body and position: fixed; overflow: scroll; from the div you will see that the address bar is nicely collapsing with scroll.

Is there a way to fix this with having nested scrolls?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满意归宿 2025-02-08 18:59:01

每当固定元素滚动时，您都可以尝试滚动窗口。
注意：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);

You can try scrolling the window whenever the fixed element is scrolled.
Note: The setTimeout is important. Removing it might lead to unexpected behavior.

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);

回复收藏 0 原文

走过海棠暮 2025-02-08 18:59:01

window.scrollTo(0,1)

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

window.scrollTo(0,1)

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

回复收藏 0 原文

浮萍、无处依 2025-02-08 18:59:01

window.scrollto（0,1）

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

window.scrollTo(0,1)

<meta name="viewport" content="width=device-width, minimal-ui">
<meta name="viewport" content="minimal-ui">

回复收藏 0 原文

~没有更多了~

关于作者

客…行舟

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

在Safari iOS 15中的固定位置视图上隐藏地址栏15

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

在Safari iOS 15中的固定位置视图上隐藏地址栏15

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。