किसी विशिष्ट स्क्रीन आकार के लिए स्मार्ट फ़ोन पर स्क्रॉलिंग को रोकें

Question

मुझे किसी निश्चित घटना के दौरान जेएस और/या JQuery का उपयोग करके मोबाइल डिवाइस पर स्क्रॉलिंग को रोकने की आवश्यकता है। मेरे पास एक आकृति है, जब उपयोगकर्ता आकृति को खोलता है तो स्क्रॉलिंग अक्षम हो जाने के बाद, स्क्रॉलिंग फिर से सक्षम हो जाएगी। लक्ष्य उपकरणों हैं:

• किसी भी IPhone 4s से अप करने के लिए नवीनतम एक (5 + 6 शामिल)

जिन कारणों से मैंने कोशिश की है, लेकिन ऐसा नहीं हो पाया में से कुछ हैं:

Method1:

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

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

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

विधि 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; 
} 

कोई अन्य सुझाव?

Answer 1

मैं जो html लिए आवेदन किया है .no-scroll को position: fixed; जोड़कर इस तय की और body जब आंकड़ा diplayed है।

जे एस के लिए जोड़ा गया खुला आंकड़ा पर स्क्रॉल निष्क्रिय करने के लिए:

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

जे एस में जोड़ा पास आंकड़ा पर स्क्रॉल सक्षम करने के लिए:

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

सीएसएस:

.no-scroll { 
    position: fixed; 
} 

उम्मीद है कि इस वसीयत समान समस्या वाले अन्य लोगों की सहायता करें।

Answer 2

आप बस सीएसएस के साथ दस्तावेज़ स्क्रॉल निष्क्रिय कर सकते हैं:

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

और सीएसएस: (या jQuery .css())

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

Answer 3

मैं उस तरह sth का उपयोग कर:

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

और मैं इसका इस्तेमाल अर्थात्। $(@).find('ul').isolatedScroll()

Answer 4

Disable scrolling in all mobile devices

कृपया सिर्फ स्वीकार किए जाते हैं जवाब नीचे answer की जाँच करें।