cordova 如何在手机间隙中修复Android设备的这种粘滞页脚?

1l5u6lss  于 2022-11-15  发布在  Android
关注(0)|答案(1)|浏览(129)

我在电话间隙工作。我已经修复了一个页脚,这适用于很少的设备,不适用于很少的设备。

页脚的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%;
}

“问题是它只能滚动一次"

klsxnrf1

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中添加一个手指滚动。

相关问题