相关疑难解决方法(0)

我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).

我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.

我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.

如何防止正文/页面滚动但仍在全屏容器内滚动？

是否可以在Mobile Safari中相对于视口定位元素？正如许多人所指出的那样,position: fixed它不起作用,但Gmail刚刚推出了一个几乎就是我想要的解决方案 - 请参阅消息视图中的浮动菜单栏.

在JavaScript中获取实时滚动事件也是一种合理的解决方案.

我有一个带有webview的原生iOS应用程序来显示Web内容.我的应用程序中有一个固定的标题,其中包含以下属性:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

在我升级到iOS 11之前一切正常.现在当我向下/向上滚动时,标题在滚动期间消失,当滚动完成时,标题再次出现.

这也可以在Xcode 8中重现.

Mobile Safari iOS 6.1.2上发生以下情况

重现步骤

创建一个position: fixed元素,<input type="text">里面有一个元素.

实际结果

1. 输入 - 没有集中

   当输入未聚焦时,固定元件的位置是正确的.

   

2. 投入 - 专注

   当输入被聚焦时,浏览器进入一种特殊模式,在该模式下它不再更新固定元素的位置(任何固定定位元素,而不仅仅是输入的父元素)并向下移动整个视口以便输入父元素位于屏幕的中心.

   观看现场演示:http://jsbin.com/oqamad/1/

   

预期结果

始终遵守固定元件的位置.

修复或解决方法？

有关如何强制Safari正确显示固定元素的任何线索都会有所帮助.

我更喜欢一种不涉及使用position: absolute和设置onscroll事件处理程序的解决方法.

问题:基于iOS7 Safari中主屏幕Web应用程序的给定示例,如何实现永不滚动出视图的固定持久标头,以及在敲击时滚动到视图中的输入字段？

这两个示例有一个区别,一个height=device-height在视口中,另一个没有.

没有设备高度

<meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" />

演示:http://run.plnkr.co/plunks/SU8Csk/

编辑链接:http://plnkr.co/edit/SU8Csk

好处:固定标题在点击字段时不会改变位置/高度.

坏处:用户无法在不手动滚动或按下"下一步"按钮的情况下看不到聚焦的字段.这可能非常繁琐,尤其是如果字段位于不溢出的页面上.

设备高度

<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" />

演示:http://run.plnkr.co/plunks/rPoyaB/

编辑链接:http://plnkr.co/edit/rPoyaB

好处:用户根据需要滚动到焦点字段.

坏处:固定标题完全滚出视图,这需要始终保持在屏幕上.场景是,它将包含一个取消按钮和一个始终可以访问的保存按钮.此外,当字段模糊时,标题本身看起来被压扁,直到用户将其向下滚动到视图中,但如果禁用溢出,则它们甚至无法执行此操作.

丑陋的:在我的非平凡的真实代码中,远离这些简化的例子,有一堆元素绝对位于标题内以创建曲线"标签"效果,这些元素的对齐完全关闭.

您应该能够在iOS7 Safari中打开每个演示URL,添加到主屏幕,然后启动以演示该问题.

解决这个问题的最佳方法是什么？

注意:我知道iOS7 Safari中存在"错误",特别是涉及到主屏幕Web应用程序时,但我相信可能存在与我如何构建页面相关的解决方法.我做了大量的研究(见下文),但我很难找到解决方案.

"固定标题"问题的相关链接: ios7 +中需要固定标题,如何获得固定标题以保持在页面顶部？, 修复了移动safari网站上的文本字段标题, iOS 5固定定位和虚拟键盘, ipad/iphone上固定页眉,页脚和侧栏的问题, CSS"位置:固定;" 在iPad/iPhone上？, 固定在Mobile Safari中的定位,当在Mobile Safari中打开虚拟键盘时, 如何阻止我的固定导航像这样移动？, web应用程序 - 设备高度/键盘问题 …

一旦使用除可见之外的值分配溢出,其所有子元素都将被剪裁.这是溢出属性的目的.但是,我必须使其中一个子元素"浮动"而不是剪切(如弹出窗口) - 只是其中之一; 不是全部.可能吗？

以下面的例子为例.是否有任何CSS设置不会剪切黄色div,同时剪切蓝色元素？(目前它们都被裁剪)

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
 <div style="top:30px;width:50px;height:100px;background:yellow">
 </div>
 <div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
 </div>
</div>

该代码也可以在http://jsfiddle.net/kZBxD/找到

我在 Adob​​e Muse 中建立了一个网站，它有一个粘性标题，当滚动经过徽标时会出现。这在 Chrome 和 Firefox 上完美运行，甚至在 iPad Safari 上，但是，它在桌面 Safari 上运行不佳，并且在单击平滑滚动到锚点的锚链接时闪烁严重。

请参阅下面的示例网站：

http://mattstest03.businesscatalyst.com/index.html

在 Firefox/Chrome 上单击“联系我们”时，粘性标题在整个平滑滚动过程中看起来都很棒。在 Safari 上，它会在滚动过程中闪烁开/关。这是闪烁效果的 GIF：

这是我的代码：

CSS

#sticky-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    background: transparent url("assets/photoshop-eclipse.jpg") repeat left top;
}
/* Circle Logo */
#u73837 {
    width: 57px;
    transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -webkit-transition: width 0.4s, height 0.4s;
}
/* Text Logo */
#u56099 {
    width: 229px;
    transition: all 0.4s !important; …

我最近一直在做一个与 colorbox 一起工作的项目。一切都在台式机上的所有浏览器中运行，但是我在 iPad 浏览器上遇到了一些问题。

我正在使用颜色框来显示一个包含多个输入文本框的表单，供用户输入和保存信息。我遇到的问题是，当用户单击 iPad 上颜色框内的文本框时，颜色框位置被向下和向右推，因此用户无法查看颜色框，除非他们缩小并再次找到颜色框. 但是，如果他们这样做，然后再次单击文本框，则会发生同样的事情等等......因此他们无法在文本框中输入任何信息。

我有一种感觉，这与 iPad 试图在单击文本框时将注意力集中在文本框上并尝试重新定位以使文本框进入视图这一事实有关，但由于显示了颜色框，因此这不起作用。我不确定这是否只是一个想法？

如果您想了解更多信息，请告诉我。

任何帮助都会很棒！