safari ipad: menonaktifkan scrolling, dan efek bouncing?

Saya sedang mengerjakan aplikasi berbasis browser, saat ini saya sedang mengembangkan dan menata untuk browser safari ipad.

Saya mencari dua hal di ipad: Bagaimana cara menonaktifkan pengguliran vertikal untuk halaman yang tidak memerlukannya? & bagaimana cara menonaktifkan efek pantulan elastis?

Jawaban ini tidak lagi berlaku, kecuali Anda mengembangkan untuk perangkat iOS yang sangat lama ... Silakan lihat solusi lain

Jawaban 2011: Untuk aplikasi web / html yang berjalan di dalam iOS Safari, Anda menginginkan sesuatu seperti

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

Untuk iOS 5 Anda mungkin ingin mempertimbangkan hal-hal berikut: document.ontouchmove dan scrolling di iOS 5

Pembaruan September 2014: Pendekatan yang lebih menyeluruh dapat ditemukan di sini: https://github.com/luster-io/prevent-overscroll . Untuk itu dan banyak lagi saran aplikasi web yang berguna, lihat http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Pembaruan Maret 2016: Tautan terakhir itu tidak lagi aktif - lihat https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html untuk versi yang diarsipkan. Terima kasih @falsarella karena telah menunjukkannya.

Anda juga dapat mengubah posisi body / html menjadi tetap:

body,
html {
  position: fixed;
}

Untuk mencegah pengguliran di browser seluler modern, Anda perlu menambahkan pasif: false. Saya telah menarik rambut saya agar ini berfungsi sampai saya menemukan solusi ini. Saya hanya menemukan ini disebutkan di satu tempat lain di internet.

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

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

Anda dapat menggunakan cuplikan kode jQuery ini untuk melakukan ini:

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

Ini akan memblokir pengguliran vertikal dan juga efek memantul kembali yang terjadi di halaman Anda.

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

Pada wadah Anda dapat mengatur efek pantulan di dalam elemen

Sumber: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Saya tahu ini sedikit off-piste tetapi saya telah menggunakan Swiffy untuk mengubah Flash menjadi game HTML5 interaktif dan menemukan masalah pengguliran yang sama tetapi tidak menemukan solusi yang berhasil.

Masalah yang saya hadapi adalah bahwa tahapan Swiffy memenuhi seluruh layar, jadi segera setelah dimuat, peristiwa touchmove dokumen tidak pernah dipicu.

Jika saya mencoba menambahkan acara yang sama ke penampung Swiffy, itu diganti segera setelah panggung dimuat.

Pada akhirnya saya menyelesaikannya (agak berantakan) dengan menerapkan event touchmove ke setiap DIV di dalam panggung. Karena div ini juga selalu berubah, saya perlu terus memeriksanya.

Ini adalah solusi saya, yang tampaknya berhasil dengan baik. Saya harap ini membantu orang lain yang mencoba menemukan solusi yang sama dengan saya.

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

Kode untuk Untuk menghapus safari ipad: nonaktifkan scrolling, dan efek bouncing

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

Jika Anda memiliki tag canvas di dalam dokumen, terkadang hal itu akan mempengaruhi kegunaan objek di dalam kanvas (contoh: pergerakan objek); jadi tambahkan kode di bawah ini untuk memperbaikinya.

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

Coba sollutuion JS ini :

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();
    }
});

Mencegah gerakan menggulir dan memantul Safari default tanpa melepaskan pendengar acara sentuh Anda.

tidak ada solusi yang berhasil untuk saya. Beginilah cara saya melakukannya.

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

Diuji di iphone. Cukup gunakan css ini pada wadah elemen target dan itu akan mengubah perilaku pengguliran, yang berhenti ketika jari meninggalkan layar.

-webkit-overflow-scrolling: auto

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

Bagi mereka yang menggunakan MyScript, Aplikasi Web dan berjuang dengan menggulir / menyeret tubuh (di iPad dan Tablet) alih-alih benar-benar menulis:

<body touch-action="none" unresolved>

Itu memperbaikinya untuk saya.

Anda dapat menggunakan js untuk mencegah gulir:

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);
  }
}

Dan dari sekedar lari / berhenti toggleScroll fungsi saat Anda membuka / menutup modal.

Seperti ini toggleScroll(true) / toggleScroll(false)

(Ini hanya untuk iOS, di Android tidak berfungsi)

Coba solusi JS ini yang mengubah webkitOverflowScrollinggaya. Triknya di sini adalah bahwa gaya ini tidak aktif, Safari seluler beralih ke pengguliran biasa dan mencegah pantulan berlebih - sayangnya, ini tidak dapat membatalkan seret yang sedang berlangsung. Solusi kompleks ini juga melacak onscrollsebagai pantulan di atas membuat scrollTopnegatif yang dapat dilacak. Solusi ini telah diuji pada iOS 12.1.1 dan memiliki satu kelemahan: sementara mempercepat gulir, pantulan tunggal masih terjadi karena menyetel ulang gaya mungkin tidak langsung membatalkannya.

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

jawaban yang ditingkatkan @Ben Bos dan dikomentari oleh @Tim

Css ini akan membantu mencegah masalah scrolling dan kinerja dengan render ulang css karena posisi berubah / sedikit tertinggal tanpa lebar dan tinggi

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

Bagi Anda yang tidak ingin menyingkirkan pantulan tetapi hanya ingin mengetahui kapan pantulannya berhenti (misalnya untuk memulai beberapa penghitungan jarak layar), Anda dapat melakukan hal berikut (penampung adalah elemen penampung yang meluap):

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

Nonaktifkan efek gulir pantulan safari:

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

Mirip dengan kiwi yang marah, saya membuatnya bekerja menggunakan ketinggian daripada posisi:

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

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

Solusi diuji, berfungsi pada iOS 12.x

Inilah masalah yang saya hadapi:

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

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

  </article>
</body>

Saat saya menggulir galeri saya, tubuh selalu menggulir sendiri (gesekan manusia tidak terlalu horizontal), yang membuat galeri saya tidak berguna.

Inilah yang saya lakukan saat galeri saya mulai bergulir

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

Dan ketika galeri saya mengakhiri penggulirannya ...

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

Semoga ini bisa membantu ~