我有一个iframe,我需要它有一个滚动溢出.它似乎在桌面上工作,我使用了一个解决方案,使其在iOS中工作.它现在适用于Android和iOS.但是,iOS8失败了.
<html>
<body>
<style type="text/css">
.scroll-container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#iframe_survey {
height: 100%;
}
.scroll-container {
height: 100%;
width: 100%;
overflow: scroll;
}
</style>
<div class="scroll-container scroll-ios">
<iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe>
</div>
</body>
在iOS上z-index,使用时会忽略可滚动区域-webkit-overflow-scrolling.如果两个-webkit-overflow-scrolling重叠的对象滚动,则滚动而不是上面显示的对象.
创建两个彼此重叠的元素(position: absolute例如),其中一个元素具有更高的元素z-index并添加
.selector
{
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
对他们两个.两个元素都应该具有足够的内容以便可滚动.
另外添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
到你的<head>.然后将页面添加到主屏幕并从那里启动它.
如果您然后尝试滚动上部元素,则会滚动下面的元素.
或者只是看看这支笔.从iOS设备启动完整版,将其添加到主屏幕并从那里启动.
使用iOS 9.1和iOS 9.3.2在iPhone 5和iPhone 6上进行测试
overflow-y为hidden通过JS确实可以解决问题,但是切换overflow会导致重新绘制导致性能问题height: 100%; width: 100%从html, body解决问题为好,但这些都必须设置百分比值正常工作需要一个适当的解决方案/解决方法来解决这个问题,而不会造成任何麻烦的副作用.还要理解为什么会发生这种情况.
因此,我使用Keith Clark的纯CSS视差理念构建了一个网站.它看起来不错,但我很好奇是否有人想出如何在iOS上允许惯性/动量滚动.
到目前为止我所知道的:
目前惯性/动量滚动不起作用,因为基本上整个页面都保存在容器中overflow-y:auto.因此,当您在页面上滚动时,您将在容器内滚动.在iOS上,您必须应用-webkit-overflow-scrolling: touch允许滚动不是视口的任何内容进行惯性/动量滚动.
如果添加-webkit-overflow-scrolling: touch到.parallax那么整个视差效果会中断.
这方面的例子
我已经尝试将iscroll.js添加到页面中,但它也会通过使.parallax容器中的子项以不正确的方式滚动来打破页面.它使视差层相对于视口而不是容器上下移动.
这导致的另一个问题不是那么大,但在这里很好解决,因为它与iOS相关的是页面永远不会进入minimal-ui,因为只有在视口滚动时才会发生.
我看到人们在博客文章中询问这个问题,所以我想我可以将相同的问题带到stackoverflow,看看是否有任何好主意.
谢谢!
因此,我们正在为一个在Safari中的iOS7上完美运行的客户端构建这个Web应用程序.但是当我们在iOS8中检查应用程序时,它有一些巨大的错误.
<section style="overlay-y: scroll;"></section>消失的内容(重叠部分).<a href="">Lala</a>)当我们-webkit-overflow-scrolling: touch;从容器中移除(包含所有内容的div)时,一切都像以前一样完美无瑕......
关于它可能是什么的任何想法？
我有一个使用Bokeh创建并在Heroku上托管的Web应用程序.我最近为应用程序创建了一个移动样式,可以在这里查看:
https://btac-web-plots.herokuapp.com/avyview?style=snowpacktracker-mobile
但是,在iOS移动设备上查看时,单指触摸滚动不起作用.作为一个黑客解决方法,我设置了我的html文件()width: 95%的.invcontent-wrapper标签index.html.这会在触摸滚动功能的右侧显示背景的垂直条带,就像传统的滚动条一样.我还在垂直条上添加了向上和向下箭头,以引导用户将其用作滚动条.
如何为整个屏幕启用触摸滚动？问题可能是返回的Bokeh文档不允许触摸滚动交互......？
我在Bokeh中使用目录格式(使用Bokeh服务器),我的index.htmlJinja模板文件包含以下相关部分:
CSS:
{% if display_style|string() == "snowpacktracker-mobile" %}
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: auto;
background-color: lightgray;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
float: left;
}
.invcontent-wrapper {
padding: 0px;
min-height: 200px;
width: 95%; /*allows for exposed background on the side*/
position: relative;
}
container { /*this holds arrows so the user knows to …