我在电话间隙工作。我已经修复了一个页脚,这适用于很少的设备,不适用于很少的设备。
页脚的HTML代码
<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>
页脚的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%;
}
对于很少的设备,它坐在屏幕的底部...尽管内容溢出,对于很少的设备,它沿着内容移动。
编辑:
根据Filippos Karapetis先生的建议,我已经尝试实现iscroll4
我使用了here中的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%;
}
“问题是它只能滚动一次"
1条答案
按热度按时间klsxnrf11#
固定位置元素在某些移动的设备中存在缺陷。这是浏览器中的缺陷/缺失功能。请查看此页面,其中列出了固定位置元素与几种不同移动设备的兼容性:
https://bradfrost.com/blog/post/fixed-position/
该页面还包含了基于Javascript的解决方案,通过覆盖浏览器的默认滚动行为来解决这些设备中的这个bug。例如,在jQuery移动的中,固定元素在页面滚动时淡出,然后在滚动结束时淡入。
iScroll 4是解决您的问题的最直接的解决方案,它占用的空间也最小(与使用成熟的框架相比):
http://cubiq.org/iscroll-4
以下是iScroll 4页面的一个小概览:
iScroll 4是对原始iScroll代码的完全重写。脚本开发开始是因为移动的webkit(iPhone、iPad、Android)没有提供在固定宽度/高度元素内滚动内容的原生方式。这种不幸的情况阻止了任何web应用程序拥有位置:绝对页眉和/或页脚以及内容的滚动中心区域。
虽然最新的Android版本支持这一功能(尽管支持不是最佳的),但苹果似乎不愿意在divs中添加一个手指滚动。