Jquery 我如何'；隐藏&x27；iPhone上的屏幕外内容？

我正在构建一个响应迅速的web应用程序，其中移动/轻薄的部分将各种面板隐藏在屏幕外。我发现，将这些项目放置在右侧，即

左侧：100%

“隐藏”无法正确隐藏项目，因为mobile safari仍然会显示该项目，即使它位于

html

和

正文

区域之外

我想通过添加以下类来滑入这些隐藏项：

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

---

从外表上看，你差不多到了那里。您需要确保#hidden item的父元素设置了宽度和位置：fixed或absolute

---

检查一下这个jsfiddle，你的css稍微修改了一下：

我知道这篇文章很旧，但我最近也遇到了同样的问题。我使用viewport元数据标记来处理这个问题，使用固定的宽度。在CSS中使用媒体查询将固定宽度和overflow-x:hidden应用于主体可能会有所帮助

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

---

希望这对某人有所帮助。

我宁愿不使用

位置：固定

是因为旧iOS版本的支持较差，但我说的对吗，在那些旧版本上，它充当

位置：绝对而不是？谢谢你，顺便说一句！我刚刚修改了我的代码以使用
位置：固定
在项目的放置方面起作用，但我的内容在折叠下面流动，这意味着它在我的iPhone上无法访问。我不能使用
位置：固定。还有其他选择吗？一定有人以前做过这件事。。。