移动浏览器持久页脚（非 jquery）答案

【问题标题】：Mobile browser persistent footer (Non jquery)移动浏览器持久页脚（非 jquery）
【发布时间】：2012-03-09 17:35:56
【问题描述】：

我正在寻找一种非 jquery 解决方案来向我的移动网站添加持久的页脚覆盖。它类似于位于内容顶部但锚定在页面底部的弹出广告。

我一直在使用 javascript 方法：

window.addEventListener(
    'scroll',
    function() {
        //if scrolled and offsets are the same (iphone)
        if(_self.initOffsetY == window.pageYOffset)
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight+"px";
        }
        else
        {
            document.getElementById(_self.id).style.bottom = _self.initWindowHeight - window.innerHeight - window.pageYOffset+"px"; 
        }
    },
    false
);

其中 initPage Height 是初始页面高度，initOffsetY 是页面的初始偏移量。这会处理浏览器菜单栏的情况。

但它在 android 上并不能很好地工作。定位已关闭。有人可以解释为什么吗？谢谢

【问题讨论】：

类似这样的东西：jsweeneydev.net84.net
您可以将您的 jQuery 文件保存为 somethingElse.js，如果它让您感觉它更像是 javascript 而不是 voodoo。我几乎没有理由不使用它，因为几乎可以肯定它已经缓存在每个目标设备上。或者，您可以将整个库重写为您自己对常见问题的解决方案的集合，看看是否可以从最终压缩大小中减少几个字节。
@BillyMoon “缓存在几乎所有设备上”并不是真的，但无论如何也不是很重要，因为 JQuery 有点小。 ftsk33 不想使用它的原因可能是因为他们不想依赖任何第三方脚本来做一些相当琐碎的事情。 JQuery 本身并没有（严重）错误，但它可能导致“哦，好吧，我会让我的用户下载 1MB 库文件并希望它有效”的编程实践（我们工作的“移动”网站有罪）。另外，很高兴知道自己的网站实际上是如何工作的。
@JeffreySweeney 几乎完全一样，但理想情况下我想放入主容器并让它像广告一样滚动到页面顶部。

标签： javascript android iphone mobile web

【解决方案1】：

您可能应该使用以下任一独立滚动助手： http://joehewitt.github.com/scrollability/ 或http://cubiq.org/iscroll

【讨论】：

似乎这些不允许浮动 div 在页面上滚动。看起来他们只是将页面的中间内容更改为可滚动。
我不确定你的意思是“浮动 div”在页面上滑动吗？

【解决方案2】：

最好有两个独立的元素，一个主包装器和一个页脚 div，并且仅在包装器中启用滚动 (overflow:auto;)？这将避免大多数浏览器不一致，甚至是关闭 JS 的情况。

但有一个缺点。您将需要为某些移动设备编写滚动内部元素的方法。有这方面的库（喘气！），但坦率地说，自己编程并不难（就像我对我的网站所做的那样）。

【讨论】：

不幸的是，这种方法不适用于 iOS overflow:scroll 不会触发元素的可滚动性
@gryzzly 因此需要对滚动方法进行编程。
抱歉没有读到最后。但是，我强烈建议使用其中一个库，因为弹跳和动态滚动需要一些时间才能正确，而且这些东西已经存在了很长一段时间并收集了很多反馈
@gryzzly 嘿，我什至没有为我的网站使用“弹跳”属性；刚刚制作了一种相当无缝的滚动方式。不过我同意你的看法；如果您时间紧迫，或者如果 iPhone 式的功能很重要，只需使用一些预先编写的代码。

【解决方案3】：

如果您喜欢这种将元素浮动到您想要的位置/近似位置：固定的方法，您将需要检查许多事情，其中一个是您必须制作的 html 代码确保没有任何边距或填充干扰上述脚本。快速破解解决方案是仅测量高度差异并据此校准您的脚本。您从校准中获得的数字可能有助于确定问题的根源。可能有一些额外的技巧可以使这项工作顺利进行，但我会选择一个已经在使用的库，看起来有很多：http://bradfrostweb.com/blog/mobile/fixed-position/

btw - iscroll4 库将修复滚动问题，溢出：auto on ios

【讨论】：