Zapobieganie przewijaniu na smartfonie dla określonego rozmiaru ekranu

Question

Po prostu trzeba uniemożliwić przewijanie na urządzeniu mobilnym za pomocą JS i/lub JQuery po wystąpieniu określonego zdarzenia. Mam figurę, kiedy użytkownik otworzy figurkę, przewijanie zostanie wyłączone, po zamknięciu przewijanie zostanie ponownie włączone. Urządzenia docelowymi są:

• każdy z iPhone 4s do najnowszej jeden (5 + 6 włączone)

Oto niektóre z rzeczy, które próbowałem, ale nie wyszło:

Method1:

    document.addEventListener('touchstart', this.touchstart); 
        document.addEventListener('touchmove', this.touchmove); 

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

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

Metoda 2:

// left: 37, up: 38, right: 39, down: 40, 
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 
var keys = {37: 1, 38: 1, 39: 1, 40: 1}; 

function preventDefault(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

function preventDefaultForScrollKeys(e) { 
    if (keys[e.keyCode]) { 
     preventDefault(e); 
     return false; 
    } 
} 

function disableScroll() { 
    if (window.addEventListener) // older FF 
     window.addEventListener('DOMMouseScroll', preventDefault, false); 
    window.onwheel = preventDefault; // modern standard 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
    window.ontouchmove = preventDefault; // mobile 
    document.onkeydown = preventDefaultForScrollKeys; 
} 

function enableScroll() { 
    if (window.removeEventListener) 
     window.removeEventListener('DOMMouseScroll', preventDefault, false); 
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null; 
    document.onkeydown = null; 
} 

Jakieś inne sugestie?

Answer 1

Naprawiłem to dodając position: fixed; do .no-scroll który jest stosowany do html i body, gdy figura jest wyświetlana.

Dodano do JS wyłączyć przewijanie na otwartym rysunku:

$('html, body').toggleClass('no-scroll'); 

Dodano do JS, aby umożliwić przewijanie na ścisłej rysunku:

$('html, body').removeClass('no-scroll'); 

CSS:

.no-scroll { 
    position: fixed; 
} 

Mam nadzieję, że będzie to pomagać innym z podobnym problemem.

Answer 2

można po prostu wyłączyć zwój dokumentów z CSS:

$('body').addClass('overflow'); // use to disable scroll 
//- 
$('body').removeClass('overflow'); // use to enable scroll 

i CSS: (lub użyć jQuery .css())

<style> 
    .overflow { 
     overflow: hidden; 
    } 
</style> 

Answer 3

I przy użyciu czegoś takiego:

$.fn.isolatedScroll = -> 
    @on 'mousewheel DOMMouseScroll', (e) -> 
     delta = e.wheelDelta or e.originalEvent and e.originalEvent.wheelDelta or -e.detail 
     bottomOverflow = @scrollTop + $(@).outerHeight() - (@scrollHeight) >= 0 
     topOverflow = @scrollTop <= 0 
     if delta < 0 and bottomOverflow or delta > 0 and topOverflow then e.preventDefault() 

i używam go tj. $(@).find('ul').isolatedScroll()

Answer 4

Disable scrolling in all mobile devices

Uprzejmie sprawdzeniu answer tuż poniżej przyjętego odpowiedź.