如何在 iPhone 上“隐藏”屏幕外的内容？

Posted 2023-03-06

【中文标题】如何在 iPhone 上“隐藏”屏幕外的内容？

【英文标题】：How do I 'hide' content off screen on the iPhone?

【发布时间】：2012-06-11 10:18:42

【问题描述】：

我正在构建一个响应式网络应用程序，它的移动/瘦身部分隐藏了屏幕外的各种面板。我发现将这些项目放置在右侧，即left: 100%“隐藏”并不能正确隐藏该项目，因为即使它位于 html 和 body 区域之外，移动 safari 仍会显示它。

我想通过添加这个类来滑动这些隐藏的项目：.focused（使用 jQuery 点击事件），它将left 的值更改为0。该类应用了一个 CSS 变换，它也处理动画。

在测试时，我发现将隐藏面板放置在左侧可以正常工作。

谁能为我提供更好的解决方案？我真的需要将隐藏的内容放在右侧。

这里有一些 CSS 可以告诉你发生了什么：

#hidden-item 
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;

  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;



#hidden-item.focused 
  left: 0;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

【参考方案1】：

我知道这篇文章已经很老了，但我最近遇到了同样的问题。我使用视口元数据标签来处理这个问题，使用固定宽度。还可以通过 CSS 中的媒体查询应用固定宽度和 overflow-x: hidden 到正文，可能会有所帮助。

<meta name="viewport" content="width=960; user-scalable=no; initial-scale=1.0; maximum-scale=1.0;">

希望这对某人有所帮助。

【参考方案2】：

从外观上看，您已经快到了。您需要确保#hidden-item 的父元素具有宽度设置和位置：固定或绝对。

看看这个 jsfiddle 稍微修改了你的 css：http://jsfiddle.net/HNrCD/2/

【讨论】：

我宁愿不使用position:fixed;，因为对旧ios版本的支持很差，但我说在那些旧版本上，它充当position: absolute;是对的吗？顺便说一句，谢谢！

我刚刚修改了我的代码以使用position: fixed;，它在项目的放置方面起作用，但我的内容在折叠下方流动，这意味着它在我的 iPhone 上无法访问。我不能使用position: fixed;。还有其他选择吗？一定有人做过这件事……