ตำแหน่ง: คงที่ไม่ทำงานบน iPad และ iPhone

Question 1

ฉันดิ้นรนกับการกำหนดตำแหน่งคงที่ใน iPad มาระยะหนึ่งแล้ว ฉันรู้จักiScrollและดูเหมือนจะใช้งานไม่ได้เสมอไป (แม้ในการสาธิต) ฉันรู้ด้วยว่า Sencha มีการแก้ไขสำหรับสิ่งนั้น แต่ฉันไม่สามารถCtrl+ Fซอร์สโค้ดสำหรับการแก้ไขนั้นได้

ฉันหวังว่าใครบางคนอาจมีทางออก ปัญหาคือองค์ประกอบตำแหน่งคงที่ไม่ได้รับการอัปเดตเมื่อผู้ใช้เลื่อนลง / ขึ้นบน Safari บนมือถือที่ใช้ iOS

Question 2

เบราว์เซอร์บนมือถือจำนวนมากจงใจไม่สนับสนุน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 และสามารถยืนยันได้ว่าใช้งานได้กับตำแหน่งที่กำหนด แม้ว่าจะมีปัญหาในการซูมเข้าและการแพนรอบองค์ประกอบคงที่

ฉันพบว่าตารางความเข้ากันได้นี้เป็นข้อมูลล่าสุดและมีประโยชน์มากกว่าโหมดเล่นโวหาร: http://caniuse.com/#search=fixed

มีข้อมูลล่าสุดบน Android, Opera (มินิและมือถือ) และ iOS

Question 3

การวางตำแหน่งคงที่ไม่ทำงานบน iOS เหมือนกับบนคอมพิวเตอร์

ลองนึกภาพคุณมีแผ่นกระดาษ (หน้าเว็บ) อยู่ใต้แว่นขยาย (วิวพอร์ต) ถ้าคุณขยับแว่นขยายและตาคุณจะเห็นส่วนอื่นของหน้า นี่คือวิธีการทำงานของ iOS

ตอนนี้มีแผ่นพลาสติกใสที่มีคำอยู่แผ่นพลาสติกนี้จะหยุดนิ่งไม่ว่าจะเป็นอะไรก็ตาม (ตำแหน่ง: องค์ประกอบคงที่) ดังนั้นเมื่อคุณเลื่อนแว่นขยายองค์ประกอบคงที่ดูเหมือนจะเคลื่อนที่

หรืออีกวิธีหนึ่งคือแทนที่จะขยับแว่นขยายคุณต้องเลื่อนกระดาษ (หน้าเว็บ) โดยให้แผ่นพลาสติกและแว่นขยายนิ่ง ในกรณีนี้คำบนแผ่นพลาสติกจะยังคงอยู่และเนื้อหาที่เหลือจะดูเหมือนว่าจะเคลื่อนไหว (เพราะจริงๆแล้ว) นี่คือเบราว์เซอร์เดสก์ท็อปแบบเดิม

ดังนั้นใน iOS วิวพอร์ตจะย้ายในเบราว์เซอร์แบบเดิมหน้าเว็บจะเคลื่อนที่ ในทั้งสองกรณีองค์ประกอบคงที่ยังคงอยู่ในความเป็นจริง แม้ว่าใน iOS องค์ประกอบคงที่ดูเหมือนจะเคลื่อนไหว

วิธีแก้ปัญหานี้คือทำตามสองสามย่อหน้าสุดท้ายในบทความนี้

(โดยทั่วไปปิดการใช้งานการเลื่อนโดยสิ้นเชิงมีเนื้อหาใน div ที่เลื่อนได้แยกต่างหาก (ดูกล่องสีน้ำเงินที่ด้านบนของบทความที่เชื่อมโยง) และองค์ประกอบคงที่อยู่ในตำแหน่งที่แน่นอน)

"ตำแหน่ง: คงที่" ทำงานได้ตามที่คุณคาดหวังใน iOS5 แล้ว

Question 4

ตำแหน่ง: คงทำงานบน 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 คุณต้องตั้งค่าตำแหน่งบนสุดด้วยไม่เช่นนั้นจะเพิ่มขอบเล็กน้อยด้วยเหตุผลบางประการ

Question 5

ตอนนี้ apple สนับสนุนสิ่งนั้น

overflow:hidden;
-webkit-overflow-scrolling:touch;

Question 6

ฉันมีปัญหานี้บน Safari (iOS 10.3.3) - เบราว์เซอร์ไม่ได้วาดใหม่จนกว่าเหตุการณ์การสัมผัสจะเริ่มทำงาน องค์ประกอบคงที่ไม่ปรากฏขึ้นหรือถูกตัดออก

เคล็ดลับสำหรับฉันคือการเพิ่ม transform: translate3d (0,0,0); ไปยังองค์ประกอบตำแหน่งคงที่ของฉัน

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

แก้ไข - ตอนนี้ฉันรู้แล้วว่าทำไมการแปลงจึงแก้ไขปัญหาได้: การเร่งฮาร์ดแวร์ การเพิ่มการเปลี่ยนแปลง 3D จะทำให้เกิดการเร่งความเร็วของ GPU เพื่อการเปลี่ยนแปลงที่ราบรื่น สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฮาร์ดแวร์เร่งชำระเงินบทความนี้: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

Question 7

ส่วนท้ายคงที่ (ที่นี่พร้อม 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}

หวังว่าจะช่วยได้

Question 8

หลีกเลี่ยงในกล่องเดียวกันโดยใช้การแปลง: --- และตำแหน่ง: คงที่ องค์ประกอบจะอยู่ในตำแหน่ง: คงที่หากมีการเปลี่ยนแปลงใด ๆ

Question 9

ฉันลงเอยด้วยการใช้ jQuery Mobile v1.1 ใหม่: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

ตอนนี้เรามีการเขียนซ้ำที่มั่นคงซึ่งให้แถบเครื่องมือคงที่จริงบนแพลตฟอร์มยอดนิยมจำนวนมากและกลับไปยังตำแหน่งแถบเครื่องมือแบบคงที่ในเบราว์เซอร์อื่น ๆ ได้อย่างปลอดภัย

ส่วนที่เด็ดสุดเกี่ยวกับวิธีการนี้ก็คือว่าแตกต่างจากโซลูชั่น JS ตามที่กำหนดฟิสิกส์เลื่อนเป็นธรรมชาติในทุกแพลตฟอร์มเลื่อนเรารู้สึกพื้นเมือง 100% เพราะมันเป็น ซึ่งหมายความว่าการเลื่อนจะรู้สึกได้ทุกที่และใช้ได้กับการป้อนข้อมูลของผู้ใช้แบบสัมผัสเมาส์วีลและแป้นพิมพ์ เป็นโบนัสโซลูชันที่ใช้ CSS ของเรามีน้ำหนักเบามากและไม่ส่งผลต่อความเข้ากันได้หรือการเข้าถึง

Question 10

การใช้ 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>

JQUERY

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

Question 11

แม้ว่าแอตทริบิวต์ CSS {position:fixed;}(ส่วนใหญ่) จะทำงานบนอุปกรณ์ iOS รุ่นใหม่ ๆ แต่ก็มีความเป็นไปได้ที่จะทำให้อุปกรณ์มีมุมแหลมและเป็นทางเลือก{position:relative;}ในบางโอกาสโดยไม่มีสาเหตุหรือเหตุผล โดยปกติแล้วการล้างแคชจะช่วยได้จนกว่าจะมีบางอย่างเกิดขึ้นและมีมุมแหลมเกิดขึ้นอีกครั้ง

โดยเฉพาะจาก Apple เองที่เตรียมเนื้อหาเว็บของคุณสำหรับ iPad :

Safari บน iPad และ Safari บน iPhone ไม่มีหน้าต่างที่ปรับขนาดได้ ใน Safari บน iPhone และ iPad ขนาดหน้าต่างจะถูกกำหนดเป็นขนาดของหน้าจอ (ลบด้วยส่วนควบคุมอินเทอร์เฟซผู้ใช้ Safari) และผู้ใช้ไม่สามารถเปลี่ยนแปลงได้ หากต้องการเลื่อนไปรอบ ๆ หน้าเว็บผู้ใช้จะเปลี่ยนระดับการซูมและตำแหน่งของวิวพอร์ตเมื่อแตะสองครั้งหรือบีบนิ้วเพื่อซูมเข้าหรือออกหรือโดยการแตะและลากเพื่อเลื่อนหน้า เมื่อผู้ใช้เปลี่ยนระดับการซูมและตำแหน่งของวิวพอร์ตพวกเขากำลังทำเช่นนั้นภายในพื้นที่เนื้อหาที่สามารถดูได้ในขนาดคงที่ (นั่นคือหน้าต่าง) ซึ่งหมายความว่าองค์ประกอบของหน้าเว็บที่มีตำแหน่ง "คงที่" ไปที่วิวพอร์ตอาจอยู่นอกพื้นที่เนื้อหาที่สามารถดูได้ซึ่งอยู่นอกหน้าจอ

สิ่งที่น่าขันคืออุปกรณ์ Android ดูเหมือนจะไม่มีปัญหานี้ นอกจากนี้ยังเป็นไปได้ทั้งหมดที่จะใช้{position:absolute;}เมื่ออ้างอิงถึงแท็กเนื้อหาและไม่มีปัญหาใด ๆ

ฉันพบต้นตอของนิสัยใจคอนี้ ว่าเป็นเหตุการณ์เลื่อนไม่เล่นได้ดีเมื่อใช้ร่วมกับแท็ก 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>

โดยพื้นฐานแล้วสิ่งนี้จะทำให้ BODY มีขนาดของวิวพอร์ตและเลื่อนไม่ได้ DIV ที่เลื่อนได้ซึ่งซ้อนอยู่ภายในจะเลื่อนตามที่ BODY ตามปกติ (ลบด้วยเอฟเฟกต์การแกว่งดังนั้นการเลื่อนจะหยุดลงเมื่อสัมผัส) DIV คงที่จะคงที่โดยไม่มีการรบกวน

ตามหมายเหตุด้านข้างz-indexค่าที่สูงของ DIV คงที่เป็นสิ่งสำคัญเพื่อให้ DIV ที่เลื่อนได้ดูเหมือนอยู่ข้างหลัง โดยปกติฉันจะเพิ่มในการปรับขนาดหน้าต่างและเลื่อนเหตุการณ์สำหรับการทำงานข้ามเบราว์เซอร์และความเข้ากันได้ของความละเอียดหน้าจออื่น

ถ้าทุกคนอื่นล้มเหลวโค้ดข้างต้นจะยังทำงานร่วมกับทั้งคงที่และ DIVs {position:absolute;}เลื่อนการตั้งค่าให้

Question 12

วิธีง่ายๆในการแก้ไขปัญหานี้เพียงแค่พิมพ์คุณสมบัติ transform สำหรับองค์ประกอบของคุณ และจะได้รับการแก้ไข Happy Coding :-)

.classname{
  position: fixed;
  transform: translate3d(0,0,0);
}

นอกจากนี้คุณสามารถลองทำตามวิธีของเขาได้เช่นกันนี่ก็ใช้ได้เช่นกัน

.classname{
      position: -webkit-sticky;
    }

Question 13

สิ่งนี้อาจใช้ไม่ได้กับทุกสถานการณ์ แต่ฉันพบว่าposition: sticky(สิ่งเดียวกันกับposition: fixed) ใช้ได้เฉพาะกับ iPhone รุ่นเก่าเมื่อคอนเทนเนอร์การเลื่อนไม่ใช่ร่างกาย แต่อยู่ในอย่างอื่น

ตัวอย่าง pseudo html:

body                         <- scrollbar
   relative div
       sticky div

div เหนียวจะเหนียวบนเบราว์เซอร์เดสก์ท็อป แต่สำหรับอุปกรณ์บางอย่างทดสอบด้วย: Chromium: dev tools: device emultation: iPhone 6/7/8 และด้วย Android 4 Firefox จะไม่ทำเช่นนั้น

สิ่งที่จะได้ผลคือ

body
    div overflow=auto       <- scrollbar
        relative div
            sticky div

Question 14

ในกรณีของฉันเป็นเพราะองค์ประกอบคงที่ถูกแสดงโดยใช้ภาพเคลื่อนไหว ตามที่ระบุไว้ในลิงค์นี้ :

ใน Safari 9.1 การมีตำแหน่ง: องค์ประกอบคงที่ภายในองค์ประกอบที่เคลื่อนไหวอาจทำให้ตำแหน่ง: องค์ประกอบคงที่ไม่ปรากฏขึ้น

Question 15

มีปัญหาเดียวกันกับ Iphone X ในการแก้ไขฉันแค่เพิ่มความสูงให้กับคอนเทนเนอร์

top: 0;
height: 200px;
position: fixed;

ฉันเพิ่งเพิ่ม top: 0 เพราะฉันต้องการให้ div อยู่ที่ด้านบน

Question 16

นี่คือทางออกของฉันสำหรับสิ่งนี้ ...

CSS

#bgimg_top {
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0;
}

HTML

<body>
<div id="bgimg_top"></div>
....
</body>

คำอธิบายคือตำแหน่งที่กำหนดไว้สำหรับ div จะทำให้ div อยู่บนพื้นหลังตลอดเวลาจากนั้นเราจะยืด div เพื่อไปที่ทุกมุมของเบราว์เซอร์ (ให้ระยะขอบของเนื้อหา = 0) โดยใช้ (ซ้ายขวาบนล่าง ) พร้อมกัน

โปรดตรวจสอบว่าคุณไม่ได้ใช้ความกว้างและความสูงเนื่องจากจะแทนที่ตัวเลือกด้านบนซ้ายขวาล่าง