Question

我在各种论坛上做了很多研究，但还没有找到真正的解决方案。我正在创建一个混合HTML 5单页面应用程序。它的主页面包含一个滚动div（id =“content”），其中包含“overflow：scroll”或“overflow：auto”。我在这里描述的是我的问题的一个详细版本，但核心点是我真的需要一个滚动div，我不能依赖于窗口本身的滚动。

我遇到过许多已经在这里和其他论坛中描述的问题，例如：

滚动体验很糟糕。 屏幕闪烁，它不流畅，最重要：背景按钮图像有一种滚动滞后或延迟：当页面的其余部分滚动时似乎“卡住”，大约1/10秒后，“跳跃”回来到他们所属的位置。我能够通过使用本论坛其他帖子中描述的“translatez”或“translaste3d”技巧来解决这个问题，并将滚动div的位置设置为绝对。但是，滚动比原生应用程序或者滚动窗口本身更不平滑。

我尝试过iScroll 5 看它是否改善了滚动体验，但它面临同样的问题：当页面变得更加复杂时，各种CSS样式显示出与“普通”div-scrolling完全相同的闪烁和口吃。我假设它使用CSS“transform：translate”的方式会导致相同的渲染问题。

我的主要问题：设置滚动位置无法可靠地运行。我已经尝试过jQuery“scrollTop（）”以及原生JavaScript“element.scrollTop = ...”。我也尝试过各种论坛中描述的解决方法，例如：将滚动div的溢出设置为“隐藏”，然后设置滚动位置，然后再次将其重置为“自动”。它似乎改善了局面，但并没有完全消除它。我有一个广泛的跟踪输出来跟踪问题的顺序：

用户向上滚动（由滑动手势启动的动量滚动）
如果是scrollTop＆lt; 300px，我以异步方式加载数据并将其添加到滚动div的内容顶部
为了给用户提供平滑（而非“跳跃”）的滚动体验，我通过所添加数据的水平大小（即scrollTop = scrollTop + horizSizeOfAddedElements）来校正滚动位置，例如， 3299px。
在我的跟踪输出中，我可以看到它正常工作：触发滚动事件，scrollTop返回我之前设置的位置
片刻之后，动量滚动似乎开始了（我还没有触及屏幕，滚动仍在继续）并将scrollTop重置为重置之前的状态。例如。 299px而不是3299px。

内容有以下主要结构：

<!-- Navbar ----------------------------------------------------------- -->
<section id="navBarPlaceHolder">    
</section>

<!-- Content ---------------------------------------------------------- -->

<div id="contentWrapper" class="contentWrapper">
    <div id="content" class="app-container">
    </div>
</div>

样式：

.app-container {
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px; margin-top:0px; margin-right:0px; margin-bottom:0px;
    display:inline-block; 
    vertical-align: top;
    min-width: 320px;
    overflow-y: auto; 
    position:absolute;
    top: 45px; bottom: 12px;
    -webkit-overflow-scrolling: touch; 
 }

.app-container > * {
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0px);

}

.contentWrapper{
    x-border: solid; border-color:black; border-width:1px; 
    margin-left: auto; margin-right: auto;
    white-space: nowrap; 
    vertical-align: top;
    margin-left: auto; margin-right:auto;
    overflow:hidden;
    position: absolute; 
    top: 10px; bottom: 5px;
}

我还尝试了其他的解决方法，例如使用“transform：translateY”而不是设置scrollTop，但在这种情况下，我会依赖于每个滚动事件被正确触发，以便在没有更多动态数据时撤消“translateY”被添加到div的顶部。但是在移动浏览器上，并不是每个滚动事件都会按预期触发。

顺便说一下，整个机制在当前的桌面浏览器（Chrome，IE，Firefox）以及和Android Google Chrome浏览器（从Google Play安装）都能正常运行）。 Android浏览器的浏览器真的比Google Chrome浏览器差吗？因此，对于更复杂的应用程序，似乎需要使用本机应用程序而不是HTML 5应用程序。

对此的任何想法都非常感谢，非常感谢提前水疗

混合应用程序，在Android 4.x上滚动DIV

0 个答案: