ipad safari: kaydırma ve zıplama efekti devre dışı bırakılsın mı?

Tarayıcı tabanlı bir uygulama üzerinde çalışıyorum, şu anda ipad safari tarayıcısı için geliştiriyorum ve şekillendiriyorum.

İpad'de iki şey arıyorum: Gerekmeyen sayfalar için dikey kaydırmayı nasıl devre dışı bırakabilirim? & elastik sıçrama etkisini nasıl devre dışı bırakabilirim?

Çok eski bir iOS cihazı için geliştirme yapmıyorsanız, bu cevap artık geçerli değildir ... Lütfen diğer çözümlere bakın

2011 yanıtı: iOS Safari'de çalışan bir web / html uygulaması için şuna benzer bir şey istiyorsunuz:

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

İOS 5 için şunları hesaba katmak isteyebilirsiniz: document.ontouchmove ve iOS 5'te kaydırma

Eylül 2014 Güncellemesi: Daha kapsamlı bir yaklaşım burada bulunabilir: https://github.com/luster-io/prevent-overscroll . Bunun ve pek çok yararlı web uygulaması tavsiyesi için bkz. Http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Güncelleme Mart 2016: Bu son bağlantı artık aktif değil - bkz https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist bunun yerine arşivlenmiş sürüm için .html . Bunu belirttiğiniz için @falsarella'ya teşekkürler.

Ayrıca body / html'nin konumunu sabit olarak değiştirebilirsiniz:

body,
html {
  position: fixed;
}

Modern mobil tarayıcılarda kaydırmayı önlemek için passive: false eklemeniz gerekir. Bu çözümü bulana kadar bunu işe yarayabilmek için saçımı çekiyordum. Bu sözü internette başka bir yerde buldum.

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

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

Bunu yapmak için bu jQuery kod parçacığını kullanabilirsiniz:

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

Bu, dikey kaydırmayı ve ayrıca sayfalarınızda meydana gelen herhangi bir geri dönme etkisini engelleyecektir.

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

Konteynerde elementin içinde sıçrama efekti ayarlayabilirsiniz.

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

Bunun biraz pist dışı olduğunu biliyorum, ancak Flash'ı etkileşimli bir HTML5 oyununa dönüştürmek için Swiffy'yi kullanıyorum ve aynı kaydırma sorunuyla karşılaştım ancak işe yarayan hiçbir çözüm bulamadım.

Karşılaştığım sorun, Swiffy sahnesinin tüm ekranı kaplamasıydı, bu nedenle yüklenir yüklenmez, belge dokunma hareketi hiçbir zaman tetiklenmedi.

Aynı olayı Swiffy konteynırına eklemeye çalışırsam, sahne yüklenir yüklenmez değiştirildi.

Sonunda, touchmove olayını sahne içindeki her DIV'ye uygulayarak (oldukça karışık bir şekilde) çözdüm. Bu div'ler de sürekli değiştiği için onları kontrol etmeye devam etmem gerekiyordu.

Bu benim çözümümdü ve iyi çalışıyor gibi görünüyor. Umarım benimle aynı çözümü bulmaya çalışan herkes için yararlıdır.

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

İpad safari'yi kaldırmak için kodlama: kaydırma ve zıplama efektini devre dışı bırakın

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

Belgenin içinde tuval etiketiniz varsa , bazen bu nesnenin Canvas içindeki kullanılabilirliğini etkiler (örnek: nesnenin hareketi); bu yüzden düzeltmek için aşağıdaki kodu ekleyin.

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

Bu JS çözümünü deneyin :

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

Dokunma etkinliği dinleyicilerinizi ayırmadan varsayılan Safari kaydırma ve sıçrama hareketlerini engeller.

çözümlerin hiçbiri benim için işe yaramıyor. Ben böyle yaparım.

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

İphone'da test edilmiştir. Sadece bu css'i hedef öğe kabında kullanın ve kaydırma davranışını değiştirecek, parmak ekrandan çıktığında duracaktır.

-webkit-overflow-scrolling: auto

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

MyScript the Web App kullanan ve aslında yazmak yerine gövde kaydırma / sürükleme (iPad ve Tabletlerde) ile uğraşanlar için:

<body touch-action="none" unresolved>

Bu benim için sorunumu çözdü.

Kaydırmayı önlemek için js kullanabilirsiniz:

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

Ve toggleScrollmodal'ı açtığınızda / kapattığınızda sadece çalıştır / durdur işlevi yerine.

Bunun gibi toggleScroll(true) / toggleScroll(false)

(Bu sadece iOS içindir, Android'de çalışmıyor)

webkitOverflowScrollingStili değiştiren bu JS çözümünü deneyin . Buradaki hile, bu tarzın kapalı olması, mobil Safari'nin normal kaydırmaya gitmesi ve aşırı sıçramayı engellemesidir - ne yazık ki, devam eden sürüklemeyi iptal edemez. Bu karmaşık çözüm aynı zamanda onscroll, üstteki sıçrama scrollTopizlenebilecek negatif hale getirirken izler . Bu çözüm, iOS 12.1.1'de test edilmiştir ve tek bir dezavantajı vardır: Kaydırma hızlandırılırken, stilin sıfırlanması onu hemen iptal edemeyebileceğinden, tek aşırı sıçrama yine de gerçekleşir.

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

geliştirilmiş cevap @ Ben Bos ve @ Tim tarafından yorumlandı

Bu css, konum değiştiğinden / genişlik ve yükseklik olmadan çok az gecikme olduğundan, css yeniden oluşturma ile kaydırma ve performans sorunlarının önlenmesine yardımcı olur

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

Zıplamadan kurtulmak istemeyen, ancak ne zaman durduğunu bilmek isteyenler için (örneğin, ekran mesafelerinin bazı hesaplamalarına başlamak için), aşağıdakileri yapabilirsiniz (konteyner, taşan konteyner öğesidir):

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

Safari sıçrama kaydırma efektini devre dışı bırakın:

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

Kızgın kivi'ye benzer şekilde, pozisyondan ziyade yüksekliği kullanarak çalışmasını sağladım:

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

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

Çözüm test edildi, iOS 12.x üzerinde çalışıyor

Bu karşılaştığım sorun:

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

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

  </article>
</body>

Galerimi kaydırırken, vücut her zaman kendi kendini kaydırıyor (insan kaydırması gerçekten yatay değil), bu da galerimi işe yaramaz hale getiriyor.

Galerim kaymaya başlarken yaptığım şey şöyle

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

Ve galerim kaydırmayı bitirdiğinde ...

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

Umarım bu yardımcı olur ~