【问题标题】:Blackberry Webworks: Weird scrolling behavior with touchscreensBlackberry Webworks:触摸屏的奇怪滚动行为
【发布时间】:2012-11-12 14:24:02
【问题描述】:

在我的 Blackberry Webworks 应用程序(适用于智能手机 OS 6、7、7.1)中,我有一些这样的代码:

<div style="width:100%; height:100%; overflow:hidden;">
    <div style="overflow:auto;height:100px;width:100%;">
        <ul>
            <li>Some</li>
            <li>Items</li>
            <li>that</li>
            <li>needs</li>
            <li>the</li>
            <li>div</li>
            <li>to</li>
            <li>be</li>
            <li>scrolled</li>
        </ul>
    </div>
</div>

当尝试使用触摸手势滚动 div 时,我总是必须先触摸 div 元素一次(如单击),然后滚动手势才起作用。所以我必须触摸它然后滚动它,如果我想再次滚动(即使中间没有其他任何东西)我必须再次触摸它然后我才能再次滚动。

换句话说:触摸手势在我每第二次尝试时都会起作用(如果我在两者之间没有触摸其他任何东西)。

这种行为真的很奇怪,降低了可用性。

你知道我可以如何改变这种行为吗?

我尝试监听触摸事件(touchstart 和 touchmove)并自己滚动 div,这以某种方式起作用,但是如果您的手势非常快并且它也会影响到它继续滚动的本机滚动行为,那么您没有这种行为点击事件以某种方式(我不知道为什么),但它们不像以前那么好。

【问题讨论】:

    标签: javascript blackberry scroll blackberry-webworks


    【解决方案1】:

    尝试移除外部容器div 并将overflow:auto 更改为overflow:hidden

    我发布此页面是为了了解如何将不同的滚动行为添加到 WebWorks 应用程序中。它可能对你有帮助: http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/css3/overflow.html

    我知道在 WebWorks 容器中使用 CSS 时需要指定固定高度。 height:100% 的行为与您预期的不同(BrowserField 不会自动扩展为屏幕的 100%,但它会扩展为例如 200px)。

    【讨论】:

    • 外部容器 div 与您的示例中的
      类似,它包含的不仅仅是第二个 div,但我将其删除为示例。如果溢出隐藏就不可能滚动吗?!?高度也仅用于示例,它在我的应用程序中按预期显示,我的帖子只是关于滚动行为。不过还是谢谢你。
    • 我建议这样做,因为外部容器指定高度:100%,正如我所解释的,这可能会导致 Web 视图出现问题。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签