我在Phone Gap工作。我已经固定了一个页脚,这适用于少数设备,不适用于少数设备。
HTML CODE for FOOTER
<div id="footer" style="background-image:url(img/bottom_bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer</div>
<div id="info" class="info noSelect"><img src="img/info.png"/></div>
</div>
.footer
{
width:100%; position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
对于少数设备,它位于屏幕底部…尽管内容泛滥,而且对于少数设备,它会随着内容移动。
编辑:根据Filippos Karapetis Sir的建议,我已经尝试执行iscroll4
我从这里使用了这个javascript
并初始化滚动
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { mouseWheel:true });
}
-----
-----
function onDeviceReady()
{
scroll();
----
----
页脚CSS
.footer
{
width:100%; position:fixed; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
问题是它只滚动一次
固定位置元素在某些移动设备中存在bug。这是他们浏览器的一个bug/缺失的功能。看看这个页面,它列出了固定位置元素与几种不同移动设备的兼容性:
https://bradfrost.com/blog/post/fixed-position/该页面还包括基于Javascript的解决方案,通过覆盖浏览器的默认滚动行为来绕过这些设备中的此错误。例如,在jQuery Mobile中,固定元素在页面滚动时淡出,然后在滚动结束时重新淡出。
对于您的问题,使用的最直接的解决方案也是占用空间最小的(与使用完整的框架相比)是isroll 4:
http://cubiq.org/iscroll-4这是一个小的概述,来自isroll 4页面:
isroll 4是对原始isroll代码的完全重写。的脚本开发开始于移动webkit (iPhone, iPad,Android)不提供一种原生的方式来滚动内容固定宽度/高度元素。这种不幸的情况阻止了任何web应用程序有一个位置:绝对页眉和/或页脚和内容的滚动中心区域。
虽然最新的Android版本支持此功能(虽然支持不是最佳的),苹果似乎不愿意增加一个手指滚动到div