ipad Safari: ปิดการใช้งานการเลื่อนและเอฟเฟกต์การตีกลับ?

ฉันกำลังทำงานกับแอพที่ใช้เบราว์เซอร์ตอนนี้ฉันกำลังพัฒนาและจัดแต่งทรงผมสำหรับเบราว์เซอร์ซาฟารีของ ipad

ฉันกำลังมองหาสองสิ่งบน iPad: ฉันจะปิดการใช้งานการเลื่อนแนวตั้งสำหรับหน้าที่ไม่ต้องการได้อย่างไร & ฉันจะปิดใช้งานเอฟเฟกต์การตีกลับแบบยืดหยุ่นได้อย่างไร?

คำตอบนี้ใช้ไม่ได้อีกต่อไปเว้นแต่ว่าคุณกำลังพัฒนาสำหรับอุปกรณ์ iOS รุ่นเก่ามาก ... โปรดดูวิธีแก้ไขปัญหาอื่น ๆ

คำตอบปี 2011: สำหรับแอปพลิเคชันเว็บ / html ที่ทำงานใน iOS Safari ที่คุณต้องการ

document.ontouchmove = function(event){
    event.preventDefault();
}

สำหรับ iOS 5 คุณอาจต้องคำนึงถึงสิ่งต่อไปนี้: document.ontouchmove และ scrolling บน iOS 5

ปรับปรุงกันยายน 2014: วิธีการอย่างละเอียดมากขึ้นสามารถพบได้ที่นี่: https://github.com/luster-io/prevent-overscroll สำหรับคำแนะนำเกี่ยวกับเว็บแอปที่มีประโยชน์มากมายโปรดดูที่http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

อัปเดตเดือนมีนาคม 2559: ลิงก์สุดท้ายนั้นไม่สามารถใช้งานได้อีกต่อไป - ดูhttps://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .htmlสำหรับเวอร์ชันที่เก็บถาวรแทน ขอบคุณ @falsarella ที่ชี้ให้เห็น

คุณยังสามารถเปลี่ยนตำแหน่งของ body / html เป็น fixed:

body,
html {
  position: fixed;
}

เพื่อป้องกันการเลื่อนบนเบราว์เซอร์มือถือสมัยใหม่คุณต้องเพิ่ม passive: false ฉันดึงผมออกมาเพื่อให้มันใช้งานได้จนกว่าฉันจะพบวิธีแก้ปัญหานี้ ฉันพบสิ่งนี้ที่กล่าวถึงในที่อื่นบนอินเทอร์เน็ตเท่านั้น

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

คุณสามารถใช้ข้อมูลโค้ด jQuery นี้เพื่อทำสิ่งนี้:

$(document).bind(
      'touchmove',
          function(e) {
            e.preventDefault();
          }
);

การดำเนินการนี้จะบล็อกการเลื่อนในแนวตั้งและเอฟเฟกต์ตีกลับใด ๆ ที่เกิดขึ้นบนหน้าเว็บของคุณ

overflow: scroll;
-webkit-overflow-scrolling: touch;

บนคอนเทนเนอร์คุณสามารถตั้งค่าเอฟเฟกต์ตีกลับภายในองค์ประกอบได้

ที่มา: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

ฉันรู้ว่านี่เป็นเรื่องเล็กน้อย แต่ฉันใช้ Swiffy เพื่อแปลง Flash เป็นเกม HTML5 แบบโต้ตอบและพบปัญหาการเลื่อนแบบเดียวกัน แต่ไม่พบวิธีแก้ปัญหาที่ได้ผล

ปัญหาที่ฉันมีคือเวที Swiffy กำลังขึ้นทั้งหน้าจอดังนั้นทันทีที่โหลดขึ้นเหตุการณ์การสัมผัสของเอกสารจะไม่ถูกทริกเกอร์

หากฉันพยายามเพิ่มเหตุการณ์เดียวกันลงในคอนเทนเนอร์ Swiffy เหตุการณ์นั้นจะถูกแทนที่ทันทีที่เวทีโหลด

ในที่สุดฉันก็แก้ไขมัน (ค่อนข้างยุ่ง) โดยใช้เหตุการณ์ touchmove กับทุก DIV ภายในเวที เนื่องจาก div เหล่านี้มีการเปลี่ยนแปลงตลอดเวลาฉันจึงต้องตรวจสอบต่อไป

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

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

Code to ในการลบ ipad safari: ปิดการใช้งานการเลื่อนและการตีกลับ

   document.addEventListener("touchmove", function (e) {
        e.preventDefault();
    }, { passive: false });

หากคุณมีแท็กcanvasอยู่ในเอกสารบางครั้งอาจมีผลต่อการใช้งานของวัตถุภายใน Canvas (ตัวอย่าง: การเคลื่อนที่ของวัตถุ) ดังนั้นเพิ่มโค้ดด้านล่างเพื่อแก้ไข

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

ลองใช้ JS Sollutuion :

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

ป้องกันการเลื่อนและท่าทางการเด้งของ Safari ตามค่าเริ่มต้นโดยไม่ต้องถอดผู้ฟังเหตุการณ์สัมผัสของคุณ

ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉัน นี่คือวิธีที่ฉันทำ

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

ทดสอบใน iphone เพียงใช้ css นี้บนคอนเทนเนอร์องค์ประกอบเป้าหมายและมันจะเปลี่ยนพฤติกรรมการเลื่อนซึ่งจะหยุดเมื่อนิ้วออกจากหน้าจอ

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

สำหรับผู้ที่ใช้ MyScript บนเว็บแอพและกำลังดิ้นรนกับการเลื่อน / ลากร่างกาย (บน iPad และแท็บเล็ต) แทนที่จะเขียนจริง:

<body touch-action="none" unresolved>

ที่แก้ไขให้ฉัน

คุณสามารถใช้ js เพื่อป้องกันการเลื่อน:

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

และไม่ใช่แค่เรียกใช้ / หยุด toggleScrollfunc เมื่อคุณเปิด / ปิดโมดอล

แบบนี้ toggleScroll(true) / toggleScroll(false)

(สำหรับ iOS เท่านั้นบน Android ไม่ทำงาน)

ลองใช้โซลูชัน JS ที่สลับwebkitOverflowScrollingสไตล์ เคล็ดลับที่นี่คือสไตล์นี้ปิดอยู่ Safari บนมือถือจะเลื่อนไปที่การเลื่อนธรรมดาและป้องกันการตีกลับมากเกินไป - อนิจจาไม่สามารถยกเลิกการลากที่กำลังดำเนินอยู่ได้ โซลูชันที่ซับซ้อนนี้ยังติดตามการonscrollตีกลับด้านบนทำให้scrollTopเกิดผลลบที่อาจติดตามได้ โซลูชันนี้ได้รับการทดสอบบน iOS 12.1.1 และมีข้อเสียเปรียบเพียงประการเดียว: ในขณะที่การเร่งความเร็วของการเลื่อนเพียงครั้งเดียวการตีกลับเกินยังคงเกิดขึ้นเนื่องจากการรีเซ็ตสไตล์อาจไม่สามารถยกเลิกได้ทันที

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

ปรับปรุงคำตอบ @Ben Bos และแสดงความคิดเห็นโดย @Tim

css นี้จะช่วยป้องกันปัญหาการเลื่อนและประสิทธิภาพในการ re-render css เนื่องจากตำแหน่งมีการเปลี่ยนแปลง / มีความล่าช้าเล็กน้อยโดยไม่มีความกว้างและความสูง

body,
html {
  position: fixed;
  width: 100%; 
  height: 100%
}

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

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

ปิดใช้งานเอฟเฟกต์การเลื่อนเด้งของซาฟารี:

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

คล้ายกับกีวีโกรธฉันทำให้มันทำงานโดยใช้ความสูงมากกว่าตำแหน่ง:

html,body {
  height: 100%;
  overflow: hidden;
}

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}

ทดสอบโซลูชันแล้วใช้งานได้กับ iOS 12.x

นี่คือปัญหาที่ฉันพบ:

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

ในขณะที่ฉันเลื่อนแกลเลอรีร่างกายจะเลื่อนตัวเองตลอดเวลา (การปัดของมนุษย์ไม่ใช่แนวนอนจริงๆ) ทำให้แกลเลอรีของฉันไร้ประโยชน์

นี่คือสิ่งที่ฉันทำในขณะที่แกลเลอรีของฉันเริ่มเลื่อน

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

และเมื่อแกลเลอรีของฉันสิ้นสุดการเลื่อน ...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

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