修复了 Mobile Safari 中的定位

IT技术 javascript iphone css mobile-safari
2021-01-20 05:01:12

是否可以在 Mobile Safari 中定位相对于视口固定的元素？正如许多人所指出的，position: fixed它不起作用，但 Gmail 刚刚提出了一个几乎正是我想要的解决方案 - 请参阅邮件视图上的浮动菜单栏。

在 JavaScript 中获取实时滚动事件也是一个合理的解决方案。

6个回答

这个固定位置的 div 只需 2 行代码就可以实现，它将滚动时的 div 移动到页面底部。

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};
onscroll 直到滚动完成后才会触发，因此元素将随页面一起滚动，然后在滚动完成后吸附到底部。
2021-03-19 05:01:12
此外，移动版 Safari 现在支持硬件加速转换。所以 element.style.webkitTransform = "translate3d(0, " + window.pageYOffset + "px, 0)"; 与设置最高值相比，实际上执行速度更快，波动更小。
2021-03-21 05:01:12
@Adam：不知道为什么，但这对我不起作用。该元素根本没有出现。在它之前position:fixed;top:50%;left:50%;。
2021-03-22 05:01:12
这不是有点延迟吗？
2021-03-29 05:01:12
为什么这是公认的答案？仍然有许多用户使用较低版本的 iOS，原因之一是缺少对那里设备的支持。
2021-03-26 05:01:12
今天早上看到的。最后！
2021-04-10 05:01:12
其他不在 iOS 上的移动设备呢？
2021-04-10 05:01:12
如果您在 IOS 5.1.1（或更早版本）中使用 position:fixed，您可能会陷入痛苦的世界。这是马车。很马车。
2021-04-10 05:01:12
@NickGreen - 因为它适用于 iOS 5，所以我们希望用户将他们的旧设备扔进垃圾箱，这与 Apple 有关，因为大多数软件在旧手机上不起作用。
2021-04-11 05:01:12

请参阅Google 对此问题的解决方案。您基本上必须使用 JavaScript 自己滚动内容。Sencha Touch还提供了一个库，用于在非常高效的庄园中获得这种行为。

2021-03-30 05:01:12

它对我有用：

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

（44是我的酒吧的高度）

虽然栏只在滚动的末尾移动......

这可能会让您感兴趣。这是 Apple Dev 支持页面。
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

阅读“ 4. 修改依赖CSS固定定位的代码”这一点，你会发现苹果有很好的理由有意识地决定将固定位置视为静态。

2021-03-26 05:01:12
该链接没有给出“非常好的理由”。所尝试的只是对当前情况的描述。
2021-03-29 05:01:12
其它你可能感兴趣的问题
上一篇如何从字符串创建 Web Worker 下一篇Play 2.x：如何使用通用按钮发出 AJAX 请求