3

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

我想通过添加这个类来滑动这些隐藏的项目：（.focused使用 jQuery click 事件），它将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);
}
4

2 回答 2

1

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

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

希望这可以帮助某人。

于 2013-12-03T13:41:45.513 回答
0

从外观上看，您几乎就在那儿。您需要确保#hidden-item 的父元素具有宽度设置和位置：固定或绝对。

用你的 css 稍微修改一下这个 jsfiddle：http: //jsfiddle.net/HNrCD/2/

于 2012-06-08T06:39:47.650 回答