iOS 5向Web设计人员发布了一个新属性-webkit-overflow-scrolling:touch,该属性使用iOS设备硬件加速器为可滚动div提供本机滚动.
当我们在开发中的网站上实施它确实有效但不是很好.我相信可能存在CSS问题因此我在这里问.
以下小提琴将向您展示它的完美运作
如果您在开发中弹出我们的网站,您会在设施选项卡下找到相同的面板,但在iOS上虽然滚动是完美的,溢出的部分不会显示图片文字切成两半.
http://www.golfbrowser.com/courses/mill-ride/
我不知道如何修复这个 http://www.golfbrowser.com/photo.PNG
正如标题所说,当使用CSS属性滚动/拖动内容时,我遇到了隐藏内容的问题-webkit-overflow-scrolling: touch.
为了基本的理解,这是我的标记
<div class="page">
<div class="section_title">Title</div>
<div class="items">
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
</div>
<div class="section_title">Title</div>
<div class="items">
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
<div class="item">...Text and Image...</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
而CSS:
.page {
width: 320px;
height: 366px;
overflow: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
Run Code Online (Sandbox Code Playgroud)
代码本身运行良好,我可以滚动浏览内容,但是当我滚动/拖动时,项目div内的所有内容都被隐藏了.有人遇到过这个问题并解决了它,或者只是Mobile Safari的标准行为来节省内存,我们无能为力吗?
任何帮助表示赞赏:-)
我有一个无法滚动的IOS Web App.出于这个原因,我想停用滚动.为此,我使用元素的ontouchmove属性并让它调用一个使用element.preventDefault的函数.但是,当它在textarea或input元素上启动时,即使元素被禁用,我也无法检测到任何触摸事件!我也尝试通过JavaScript的addEventlistener将touchmove或touchstart事件绑定到这些元素,但没有成功!
这是我的JavaScript:
function onBodyLoad() {
document.addEventListener( "touchstart", doNotScroll, true );
document.addEventListener( "touchmove", doNotScroll, true );
}
function doNotScroll( event ) {
event.preventDefault();
event.stopPropagation();
}
Run Code Online (Sandbox Code Playgroud)
谢谢你的帮助!
我在一个带有一些输入字段的网站上有一个基本表单.如果用户试图滚动页面,并通过将手指放在输入框中开始滚动,则不会让页面滚动.如果他们用手指在身体某处开始滚动,页面滚动就好了.
这个人似乎也有同样的问题,但是他说以前的开发人员有目的地实现了这个问题,我肯定没有这个问题. 输入字段可防止页面在iphone上滚动
有任何想法吗?