it-swarm.dev

位置:固定不适用于iPad的和iPhone

我已经在iPad上固定定位了一段时间。我知道 iScroll 并且它似乎并不总是有效(即使在他们的演示中)。我也知道Sencha已经解决了这个问题,但我做不到 Ctrl + F 该修复程序的源代码。

我希望有人可以有解决方案。问题是,当用户在iOS移动的Safari上进行平移时,固定定位元素不会更新。

128
Tower

我最终使用了新的jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

我们现在有一个可靠的重写,在许多流行的平台上提供真正的固定工具栏,并安全地回退到其他浏览器中的静态工具栏定位。

关于这种方法最酷的部分是,与基于JS的解决方案不同,它在所有平台上强加了不自然的滚动物理,我们的滚动感觉100%原生,因为它。这意味着滚动感觉无处不在,并且可以使用触摸,鼠标滚轮和键盘用户输入。作为奖励,我们基于CSS的解决方案非常轻量级,不会影响兼容性或可访问性。

6
Tower

许多移动浏览器故意不支持position:fixed;,理由是固定元素可能会妨碍小屏幕。

Quirksmode.org网站有一篇非常好的博客文章解释了这个问题: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

另请参阅此页面以获取兼容性图表,其中显示了哪些移动浏览器支持position:fixed;http://www.quirksmode.org/m/css.html

(但请注意,移动浏览器世界正在快速移动,因此这样的表可能无法保持最新​​状态!)

更新:据报道iOS 5和Android 4都有位置:现在支持固定。

我今天在Apple商店自己测试了iOS 5,并且可以确认它确实适用于固定位置。但是,在固定元素周围放大和平移存在问题。

我发现这个兼容性表比quirksmode更新,更有用: http://caniuse.com/#search=fixed

它拥有Android,Opera(迷你和移动)和iOS的最新信息。

65
Spudley

固定定位在iOS上不像在计算机上那样有效。

想象一下,你在放大镜(视口)下面有一张纸(网页),如果你移动放大镜和你的眼睛,你会看到页面的不同部分。这就是iOS的工作原理。

现在有一张透明塑料上面有一个Word,这片塑料无论什么都固定不动(位置:固定元件)。所以当你移动放大镜时,固定元素 出现 移动。

或者,不要移动放大镜,而是移动纸张(网页),保持塑料和放大镜片不动。在这种情况下,塑料薄片上的Word似乎保持固定,其余内容将显示为移动(因为它实际上是)这是一个传统的桌面浏览器。

因此在iOS中视口移动,在传统浏览器中移动网页。在这两种情况下,固定元素仍然存在;虽然在iOS上,固定元素似乎在移动。


解决这个问题的方法是遵循 this article 中的最后几段

(基本上完全禁用滚动,将内容放在一个单独的可滚动div中(参见链接文章顶部的蓝色框),并且固定元素绝对定位)


“position:fixed”现在可以像你在iOS5中所期望的那样工作。

37
Jonathan.

position:fixed适用于Android/iphone进行垂直滚动。但是您需要确保您的元标记已完全设置。例如

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

此外,如果您计划在Android pre 4.0上使用相同的页面,则还需要设置顶部位置,或者由于某种原因会添加一小部分。

22
Jason D.

现在Apple支持

overflow:hidden;
-webkit-overflow-scrolling:touch;
19
Uğur Özpınar

修复页脚(这里有jQuery):

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') 
{
    window.ontouchstart = function () 
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function() 
    { 
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

希望能帮助到你。

14
Martin

我在Safari(iOS 10.3.3)上遇到了这个问题 - 在触发touchend事件之前,浏览器没有重绘。固定元素没有出现或被切断。

我的诀窍是添加transform:translate3d(0,0,0);到我的固定位置元素。

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

_ edit _ - 我现在知道变换解决问题的原因:硬件加速。添加3D变换会触发GPU加速,从而实现平滑过渡。有关硬件加速检查的更多信息,请参阅以下文章: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

10
kenecaswell

使用transform避免在同一个盒子上:---和position:fixed。元素将保持在位:静态,如果有任何变换。

7
Becario Senior

使用jquery我能够想出这个。它没有滚动平滑,但它确实有效。你可以向下滚动,固定的div弹出顶部。

CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

快乐

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

最后我们要确定iPod touch是否在横向或纵向模式下进行相应显示

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>
1
abdullah

尽管CSS属性{position:fixed;}似乎(大部分)都在较新的iOS设备上工作,但有时可以让设备怪异并回退到{position:relative;},无需理由。通常清除缓存会有所帮助,直到发生某些事情并再次发生怪癖。

具体来说,来自Apple本身 为iPad准备Web内容

IPad上的Safari和iPhone上的Safari没有可调整大小的窗口。在iPhone和iPad上的Safari中,窗口大小设置为屏幕大小(减去Safari用户界面控件),并且用户无法更改。要在网页中移动,用户可以在双击或捏合放大或缩小视图时更改视口的缩放级别和位置,或者通过触摸和拖动来平移页面。当用户改变视口的缩放级别和位置时,他们在固定大小的可视内容区域(即窗口)内这样做。这意味着其位置“固定”到视口的网页元素可能会在屏幕外的可查看内容区域之外结束。

具有讽刺意味的是,Android设备似乎没有这个问题。此外,在引用body标签时也完全可以使用{position:absolute;},并且没有任何问题。

我找到了这个怪癖的根本原因;当与HTML或BODY标记一起使用时,滚动事件不会播放Nice。有时它不喜欢触发事件,或者你必须等到滚动摇摆事件结束才能接收事件。具体来说,视口在此事件结束时重新绘制,固定元素可以重新定位在视口中的其他位置。

所以这就是我所做的:( 避免使用视口,并坚持使用DOM!

<html>
  <style>
    .fixed{
      position:fixed;
      /*you can set your other static attributes here too*/
      /*like height and width, margin, etc.*/
      }
    .scrollableDiv{
      position:relative;
      overflow-y:scroll;
      /*all children will scroll within this like the body normally would.*/
      } 
    .viewportSizedBody{
      position:relative;
      overflow:hidden;
      /*this will prevent the body page itself from scrolling.*/
      } 
  </style>
  <body class="viewportSizedBody">
    <div id="myFixedContainer" class="fixed">
       This part is fixed.
    </div>
    <div id="myScrollableBody" class="scrollableDiv">
       This part is scrollable.
    </div>
  </body>
  <script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
  <script>
    var theViewportHeight=$(window).height();
    $('.viewportSizedBody').css('height',theViewportHeight);
    $('#myScrollableBody').css('height',theViewportHeight);
  </script>
</html>

实质上,这将导致BODY为视口的大小且不可滚动。嵌套在里面的可滚动DIV将按照BODY通常的方式滚动(减去摆动效果,因此滚动会在touchend上停止。)固定的DIV保持固定而不受干扰。

作为旁注,固定DIV上的高z-index值对于保持可滚动DIV看起来在其后面是很重要的。我通常在窗口调整大小和滚动事件中添加跨浏览器和备用屏幕分辨率兼容性。

如果所有其他方法都失败了,上面的代码也适用于设置为{position:absolute;}的固定和可滚动DIV。

1
Talvi Watia

在我的例子中,滚动显示了position: fixed元素,该元素在添加到DOM时最初没有显示。所以我只是手动触发了滚动事件,而事件又触发了重绘和瞧瞧。

window.scrollTo(window.scrollX, window.scrollY);
0
Eran Goldin