Previene lo scorrimento su uno smartphone per una dimensione dello schermo specifica

Question

Ho semplicemente bisogno di impedire lo scorrimento su un dispositivo mobile utilizzando JS e/o JQuery quando si verifica un determinato evento. Ho una figura, quando l'utente apre la figura lo scorrimento sarà disabilitato, una volta chiuso, lo scorrimento sarà nuovamente abilitato. dispositivi di destinazione sono:

• qualsiasi iPhone 4s da fino a quello più recente (5 + 6 incluso)

Ecco alcune delle cose che ho provato, ma non ha funzionato:

Method1:

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

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

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

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

Altri suggerimenti?

Answer 1

Ho fissato questo con l'aggiunta di position: fixed; a .no-scroll che viene applicato html e body quando viene visualizzata la figura.

Aggiunto alla JS per disabilitare lo scorrimento sulla figura aperta:

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

Aggiunto a JS per consentire lo scorrimento su una stretta figura:

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

CSS:

.no-scroll { 
    position: fixed; 
} 

Speriamo che questo aiutare gli altri con problemi simili.

Answer 2

Si può semplicemente disattivare scorrimento documento con i CSS:

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

e CSS: (o usare jQuery .css())

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

Answer 3

I utilizzando sth così:

$.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() 

e lo uso per esempio. $(@).find('ul').isolatedScroll()

Answer 4

Disable scrolling in all mobile devices

prega di controllare le answer appena sotto la risposta accettata.