Javascript 移动网络:-webkit-overflow-scrolling:触摸与位置冲突:已修复

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29695082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:48:36  来源:igfitidea点击:

Mobile web: -webkit-overflow-scrolling: touch conflicts with position:fixed

javascriptcssscrollcss-position

提问by Joy

I use position: fixedto create a fixed top navigation menu on my mobile web application.

我用来position: fixed在我的移动网络应用程序上创建一个固定的顶部导航菜单。

After adding -webkit-overflow-scrolling: touch, the scrolling works smoothly. However, the top menu disappears during scrolling. It shows only after the scrolling stops.

添加后-webkit-overflow-scrolling: touch,滚动工作顺利。但是,在滚动过程中顶部菜单会消失。它仅在滚动停止后显示。

I have searched many solutions, such as CSS3 property webkit-overflow-scrolling:touch ERRORand iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch. However, the given solutions are not working for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/(visited from iPhone 5c Chrome/Firefox).

我搜索了很多解决方案,例如CSS3 属性 webkit-overflow-scrolling:touch ERRORiOS5 Images 在使用 webkit-overflow-scrolling: touch 滚动时消失。但是,给定的解决方案对我不起作用。请查看此示例:http: //jsbin.com/woxuwihuzu/12/(从 iPhone 5c Chrome/Firefox 访问)。

Did I miss anything?

我错过了什么吗?

采纳答案by Joy

After two days struggling, I found this post saves me: 100% screen height css.

经过两天的挣扎,我发现这篇文章拯救了我:100% screen height css

I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/(visit from a real phone; a Chrome simulator doesn't tell the difference).

我必须将内容区域的高度限制为与屏幕的高度相同。请在此处找到工作演示:http: //jsbin.com/tubaqaqumi/3/(通过真实手机访问;Chrome 模拟器无法区分)。