it-swarm.dev

الموضع: ثابت لا يعمل على iPad و iPhone

لقد ناضلت مع تحديد المواقع الثابتة في باد لفترة من الوقت. أعرف iScroll ولا ​​يبدو دائمًا أنه يعمل (حتى في العرض التوضيحي الخاص به). أعرف أيضًا أن Sencha لديه حل لذلك ، لكنني لم أستطع Ctrl + F شفرة المصدر لهذا الإصلاح.

آمل أن يكون لدى شخص ما الحل. تكمن المشكلة في أن العناصر ذات الموضع الثابت لا يتم تحديثها عندما يقوم المستخدم بالضغط على/رفع على Safari على الأجهزة المحمولة التي تعمل بنظام iOS.

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 لهما موقع: دعم ثابت الآن.

لقد اختبرت نظام التشغيل iOS 5 بنفسي في متجر Apple اليوم وأؤكد أنه يعمل مع وضع ثابت. هناك مشاكل مع التكبير والتحريك حول عنصر ثابت بالرغم من ذلك.

لقد وجدت جدول التوافق هذا أكثر حداثة ومفيدًا من quirksmode one: http://caniuse.com/#search=fixed

لديها معلومات محدثة على Android و Opera (mini و mobile) و iOS.

65
Spudley

لا يعمل تحديد المواقع الثابتة على نظام iOS كما هو الحال على أجهزة الكمبيوتر.

تخيل أن لديك ورقة (صفحة الويب) تحت عدسة مكبرة (إطار العرض) ، إذا قمت بنقل العدسة المكبرة والعين ، فسترى جزءًا مختلفًا من الصفحة. هذه هي الطريقة التي يعمل بها نظام iOS.

الآن هناك ورقة من البلاستيك الشفاف مع كلمة على ذلك ، هذه الورقة من البلاستيك تبقى ثابتة بغض النظر عن (الموضع: العناصر الثابتة). لذلك عند تحريك العدسة المكبرة ، يتحرك العنصر الثابت يظهر للتنقل.

بدلاً من ذلك ، بدلاً من تحريك العدسة المكبرة ، يمكنك تحريك الورق (صفحة الويب) ، مع الحفاظ على ورقة من البلاستيك والزجاج المكبر ثابتًا. في هذه الحالة ، سيبقى Word الموجود على ورقة من البلاستيك ثابتًا ، وسيظهر باقي المحتوى وكأنه يتحرك (لأنه بالفعل) هذا مستعرض سطح مكتب تقليدي.

لذلك في iOS يتحرك viewport ، في متصفح تقليدي ، تتحرك صفحة الويب. في كلتا الحالتين تبقى العناصر الثابتة في الواقع ؛ على الرغم من أن العناصر الثابتة تظهر على نظام iOS.


طريقة الالتفاف حول هذا ، هي اتباع الفقرات القليلة الأخيرة في هذه المقالة

(قم بتعطيل التمرير كليًا ، احتفظ بالمحتوى في div منفصل قابلاً للتمرير (انظر المربع الأزرق في الجزء العلوي من المقالة المرتبطة) ، والعنصر الثابت في وضعه المطلق)


"الموضع: ثابت" يعمل الآن كما تتوقع في iOS5.

37
Jonathan.

الموضع: ثابت يعمل على نظام 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 قبل الإصدار 4.0 ، فستحتاج إلى تعيين الموضع العلوي أيضًا ، أو سيتم إضافة هامش صغير لسبب ما.

22
Jason D.

الآن أبل دعم ذلك

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

تذييل ثابت (هنا مع مسج):

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. لم تظهر العناصر الثابتة أو تم قطعها.

كانت الحيلة بالنسبة لي هي إضافة تحويل: translate3d (0،0،0)؛ لعنصر موقف ثابت.

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

EDIT- أعرف الآن لماذا يعمل التحويل على حل المشكلة: تسريع الأجهزة. تؤدي إضافة التحويل ثلاثي الأبعاد إلى تشغيل تسريع GPU لتحقيق انتقال سلس. لمعرفة المزيد عن تسريع الأجهزة ، راجع هذه المقالة: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css .

10
kenecaswell

تجنب على نفس المربع باستخدام التحويل: --- والموقف: ثابت. سيبقى العنصر في الموقف: ثابت إذا كان هناك أي تحويل.

7
Becario Senior

باستخدام مسج أنا قادر على الخروج بهذا. لا يتم التمرير بسلاسة ، لكنه يقوم بالخدعة. يمكنك التمرير لأسفل ، ويظهر div الثابت في الأعلى.

فإن المغلق

<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 :

ليس لدى Safari على iPad و Safari على iPhone نوافذ يمكن تغيير حجمها. في Safari على iPhone و iPad ، يتم ضبط حجم الإطار على حجم الشاشة (مطروحًا منه عناصر تحكم واجهة مستخدم Safari) ، ولا يمكن للمستخدم تغييره. للتنقل حول صفحة ويب ، يقوم المستخدم بتغيير مستوى التكبير وموضع إطار العرض حيث يتم النقر نقرًا مزدوجًا أو قرصة للتكبير أو التصغير أو عن طريق اللمس والسحب لتحريك الصفحة. عندما يغير المستخدم مستوى التكبير وموضع منفذ العرض ، فإنهما يقومان بذلك داخل منطقة محتوى يمكن عرضها بحجم ثابت (أي ، النافذة). هذا يعني أن عناصر صفحة الويب التي لها موضع "ثابت" في منفذ العرض يمكن أن تنتهي خارج منطقة المحتوى القابلة للعرض ، خارج الشاشة.

ما هو مثير للسخرية ، يبدو أن أجهزة Android لا تواجه هذه المشكلة. كما أنه من الممكن تمامًا استخدام {position:absolute;} عند الإشارة إلى العلامة الأساسية وليس لديك أية مشكلات.

لقد وجدت السبب الجذري لهذا الغريب ؛ أنه حدث التمرير الذي لا يتم تشغيل Nice عند استخدامه مع علامة HTML أو BODY. في بعض الأحيان لا يحب إطلاق الحدث ، أو سيكون عليك الانتظار حتى يتم الانتهاء من حدث تأرجح التمرير لاستلام الحدث. على وجه التحديد ، يتم إعادة رسم إطار العرض في نهاية هذا الحدث ويمكن إعادة تعيين العناصر الثابتة في مكان آخر في إطار العرض.

هذا ما أقوم به: ( تجنب استخدام إطار العرض ، والتمسك بـ 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>

في الأساس ، سيؤدي ذلك إلى أن يكون حجم الهيئة في حجم إطار العرض وغير قابل للتمرير. سيتم تمرير DIV القابل للتمرير المتداخل بداخله كما يفعل الجسم عادة (ناقص تأثير التأرجح ، وبالتالي يتوقف التمرير عند اللمس). يبقى ثابت DIV ثابتًا دون تدخل.

كملاحظة جانبية ، من المهم وجود قيمة z-index عالية على DIV الثابت للحفاظ على ظهور DIV القابل للتمرير خلفه. أقوم عادةً بإضافة تغيير حجم الإطار وتصفح الأحداث أيضًا من أجل التوافق عبر المستعرض وتوافق دقة الشاشة البديلة.

إذا فشل كل شيء آخر ، سيعمل الرمز أعلاه أيضًا على تشغيل كل من DIVs الثابتة والقابلة للتمرير إلى {position:absolute;}.

1
Talvi Watia

في حالتي ، أظهر التمرير عنصر position: fixed الذي لم يظهر أصلاً عند إضافته إلى DOM. لذلك ، قمت يدويًا بتشغيل حدث التمرير الذي أدى بدوره إلى إعادة رسم وفويلا.

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