webkit-overflow-scrolling使元素消失 [英] webkit-overflow-scrolling makes element disappear

问题描述

我有一个应用程序/网站，正在使用 -webkit-overflow-scrolling:touch; 使iOS上的滚动平滑.

I have an app / site where I'm using -webkit-overflow-scrolling: touch; to make the scrolling smooth on iOS.

但是，最近它开始导致我的导航栏在初始加载时(使用iOS)消失，并且仅当某些元素向上或向下滚动时才出现，这使导航栏完全不可用.

However, recently it started causing my navbar disappear upon initial load (using iOS) and it only appears when certain elements were scrolled up or down, it makes the navbar completely unusable.

如果我注释掉 -webkit-overflow-scrolling:touch; ，则它可以正常工作，但动量滚动消失了.我尝试在导航栏中添加 z-index hack，以确保它可以加载到所有内容的顶部，并且还添加了一些其他的 display 属性以供查看如果我可以破解 -webkit-overflow-scrolling:touch; ，我什至尝试使用 -webkit-transform将这些项添加到内存中:translate3d(0,0,0);，并且没有任何效果.无论何时包含 -webkit-overflow-scrolling:touch; ，导航栏仍然会消失/出现故障.

If I comment out the -webkit-overflow-scrolling: touch; then it works perfectly but the momentum scrolling is gone. I've tried adding a z-index hack to the navbar to make sure it's loading on top of everything, I've added a few different display properties as well to see if I could hack the -webkit-overflow-scrolling: touch;, I've even tried adding the items into memory using -webkit-transform: translate3d(0,0,0);, and nothing is working. The navbar still disappears / glitches out no matter what when -webkit-overflow-scrolling: touch; is included.

有人以前曾遇到过这种故障并已解决吗?我真的不想只加载整个JS库来处理滚动，但是如果我无法弄清这个小问题，我可能不得不这样做.非动量滚动感觉太笨拙且无法使用.

Has anyone had this glitch before and figured it out? I really don't want to load an entire JS library just to handle my scrolling, but I might have to if I can't figure this glitch out. The non-momentum scrolling feels so clunky and unusable.

推荐答案

我遇到了同样的问题.我有一个带有 -webkit-transform的项目列表:translate3d(0,0,0); ，一旦启用 -webkit-overflow-scrolling，它们就不会显示:touch; .我的问题是我将带有 -webkit-transform的元素嵌套在另一个div内，translate3d(0,0,0); .

I had the same problem. I had a list of items with -webkit-transform: translate3d(0,0,0); that were not showing as soon as I enabled -webkit-overflow-scrolling: touch;. My problem was that I had the elements with -webkit-transform: translate3d(0,0,0); nested inside another div.

换句话说，在具有溢出滚动的区域之间有一个div:touch和带有translate3d的子区域之间.没意识到他们必须是直子.

In other words, there was a div in between the one with the overflow-scrolling: touch and the children with the translate3d. Didn't realize they had to be direct children.

一旦我直接合并了div，它就会停止隐藏元素，并且可以完美地工作.希望能帮助到你.

Once I consolidated my divs directly it stopped hiding the elements and worked perfectly. Hope it helps.

这篇关于webkit-overflow-scrolling使元素消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！