jQuery移动css滚动和点击 [英] jQuery mobile css scroll and click

问题描述

我正在为智能手机开发移动网站，并使用jquery mobile。
第一个测试： http://pastehtml.com/view/bq51kpbmm.html

I'm developing a mobile website for smartphones and using jquery mobile. first test: http://pastehtml.com/view/bq51kpbmm.html

我已经将内容添加到页面，因此它应该是可滚动的，但是当滚动时，页眉和页脚将被禁用滚动时间。 :(
第二个测试： http://pastehtml.com/view/bq51nmk7i.html

I have added the content to the page, so it should be scrollable, but when I'm scrolling the header and footer will be disable for the scroll time. :( second test: http://pastehtml.com/view/bq51nmk7i.html

jquery mobile文档（http://jquerymobile.com/test/docs/toolbars/bars-fixed.html）给我提供了data-position = fixedshould disable hiding our header& footer

The jquery mobile documentation (http://jquerymobile.com/test/docs/toolbars/bars-fixed.html) gives me the information that data-position="fixed" should disable hiding my header & footer

我做错了什么？

推荐答案

使用jQm这是滚动时会发生的事情，尝试看看一些jQm小部件，它会补充jQm框架。我认为 iScroll 4 在此处查找您要查找的内容。

With jQm this is just what happens when scrolling. Try looking around for some jQm widgets that will compliment the jQm framework. I think iScroll 4 does what you're looking for here.

对于固定位置，在您的原始问题中：

As for the fixed positioning, from the link that you provided in your original question:

修复工具栏

Fixed toolbars

在支持CSS位置的浏览器：固定的（通常，大多数桌面浏览器，iOS5 +，Android 2.2+，BlackBerry 6等），使用fixedtoolbar插件的工具栏将固定在视口的顶部或底部，而页面内容自由滚动之间。在不支持固定定位的浏览器中，工具栏将回退到页面中的静态，行内位置。

In browsers that support CSS position: fixed, (generally, most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and more), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will fall back to static, inline positiong in the page.

要在页眉或页脚上启用此行为，请添加

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

固定标题标记示例：

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

固定页脚标记示例：

Fixed footer markup example:

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

没有提到任何说明工具栏在滚动时不会消失的事实。这只是jQm中的行为。插件可以帮助解决这个问题。

There is no mention of any facts that say the toolbars won't disappear on scrolling. That's just the behavior in jQm. Plugins can help with this.

这篇关于jQuery移动css滚动和点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！