【问题标题】：jQuery-Mobile Disable Page Dragging & prevent Scroll over Header/FooterjQuery-Mobile 禁用页面拖动并防止滚动页眉/页脚
【发布时间】：2013-06-22 14:00:40
【问题描述】：

我的 Web 应用程序中的滚动条应该只滚动“内容”部分。但是，一旦我滚动到内容的末尾或顶部，滚动条就会滚动页眉或页脚。页面也被拖了，看起来很丑。

这里有一些图片：

http://imgur.com/1xNLenx,5EVjBuH,WDo0UAa,Kd3bzy5#0

页眉和页脚位置固定。

标题：

<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

页脚：

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

如何防止这种行为？谢谢。

【问题讨论】：

你用的是什么版本的jquery mobile？
我使用的是 1.3.1 版本。
有什么想法吗？除了颜色和其他东西，我没有改变 CSS 中的任何东西。基本上在正文中有 data-role="page"，在里面有 data-role="header"，然后是 data-role= “内容”，最后是 data-role="footer" 和 data-role="navbar"
发生在所有浏览器上？
因为即使你的 jsfiddle 不适合我，请看这里：(imgur.com/wOb51sC) 我刚刚尝试了 iScrollview 并且它工作了 （尽管我不得不从中删除 float:left我的内容项，但我会找到其他浮动解决方案。谢谢你们的时间:)

标签： jquery ios css jquery-mobile

【解决方案1】：

您是否尝试过将所有三个属性都包含在您的标题中？

data-position="固定"
data-tap-toggle="false"
数据更新页面填充 =“假”

代码如下：

<div data-role="header" data-position="fixed" data-tap-toggle="false" data-update-page-padding ="false"> </div>

希望对您有所帮助！

【讨论】：

【解决方案2】：

为您的标题提供一个 ID。并尝试添加此脚本。

JQUERY

$(document).ready(function() {
    $("#my_header").fixedtoolbar({ tapToggle: false });
});

HTML

<div id="my_header" data-role="header" data-theme="b">      
    <h1>Header</h1>        
</div>

【讨论】：