दिलचस्प पोस्ट
स्प्रिंग एओपी बनाम एस्पेक्ज जे java.net.UnknownHostException: सर्वर के लिए अमान्य होस्टनाम: स्थानीय स्ट्रिंग से कक्षा प्रकार प्राप्त करना एक HTML टैग बदलने के लिए jQuery का उपयोग करें? प्रस्तुतकर्ता विशेषता द्वारा कितनी बार बुलाया जाता है? mysql n अंतिम पंक्तियों से चुनें वैश्विक ऑपरेटर की जांच के लिए एसएफआईएनएई का उपयोग करना <<? डेटा फ्रेम में जेसन डेटा आयात करना जावा का उपयोग करते हुए पीडीएफ फाइलों को कैसे पढ़ें? विंडोज पर गिट रेपो में निर्देशिकाओं की उपेक्षा करना किस प्रकार का उपयोग करें: jsonp ajax कॉल में "पोस्ट" नींद () की जावास्क्रिप्ट संस्करण क्या है? JPanel ग्राफिक्स जी रंग ड्राइंग लाइन बदलने जेपीए / सीतनिद्रा में होना मूल प्रश्न पैरामीटर पहचान नहीं करते हैं एएसपी.नेट वेब एपीआई कुछ सर्वरों पर केवल पुट के लिए 404 देता है

आईओएस सफारी – ओपरकाप को अक्षम कैसे करें लेकिन स्क्रॉल करने वाली डिवाइज को सामान्य रूप से स्क्रॉल करने की अनुमति दें?

मैं एक iPad- आधारित वेब ऐप पर काम कर रहा हूं, और ओपनस्क्रोलिंग को रोकने की आवश्यकता है ताकि यह वेब पेज की तरह कम दिखाई दे। मैं वर्तमान में व्यूपोर्ट को फ्रीज करने और ओवरस्क्रॉल को अक्षम करने के लिए इसका उपयोग कर रहा हूं:

document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); 

यह overscroll अक्षम करने के लिए बहुत अच्छा काम करता है, लेकिन मेरे ऐप में कई स्क्रॉल डिविज़ हैं, और उपरोक्त कोड उन्हें स्क्रॉल करने से रोकता है

मैं केवल आईओएस 5 और इसके बाद के संस्करण को लक्षित कर रहा हूं इसलिए मैं आईस्कोल जैसी हैमी समाधानों से बचा है। इसके बजाय मैं अपने स्क्रॉल करने योग्य डिवाइट के लिए इस सीएसएस का उपयोग कर रहा हूं:

 .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; } 

यह दस्तावेज़ ओवरस्क्रॉल स्क्रिप्ट के बिना काम करता है, लेकिन डिवेल स्क्रॉलिंग समस्या का समाधान नहीं करता है

एक jQuery प्लगइन के बिना, वहाँ overscroll तय का उपयोग करने के लिए कोई रास्ता नहीं है , लेकिन मेरी $ ('। स्क्रॉल') divs छूट?

संपादित करें:

मैंने कुछ पाया जो एक सभ्य समाधान है:

  // Disable overscroll / viewport moving on everything but scrollable divs $('body').on('touchmove', function (e) { if (!$('.scrollable').has($(e.target)).length) e.preventDefault(); }); 

जब आप div की शुरुआत या अंत की ओर स्क्रॉल करते हैं तो व्यूपोर्ट फिर भी चलता रहता है। मैं इसे भी अक्षम करने का एक रास्ता खोजना चाहता हूं

वेब के समाधान से एकत्रित समाधान "आईओएस सफारी – ओपरकाप को अक्षम कैसे करें लेकिन स्क्रॉल करने वाली डिवाइज को सामान्य रूप से स्क्रॉल करने की अनुमति दें?"

यह मुद्दा हल करता है जब आप div के शुरुआत या अंत की ओर स्क्रॉल करते हैं

 var selScrollable = '.scrollable'; // Uses document because document will be topmost level in bubbling $(document).on('touchmove',function(e){ e.preventDefault(); }); // Uses body because jQuery on events are called off of the element they are // added to, so bubbling would not work if we used document instead. $('body').on('touchstart', selScrollable, function(e) { if (e.currentTarget.scrollTop === 0) { e.currentTarget.scrollTop = 1; } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { e.currentTarget.scrollTop -= 1; } }); // Stops preventDefault from being called on document if it sees a scrollable div $('body').on('touchmove', selScrollable, function(e) { e.stopPropagation(); }); 

ध्यान दें कि यह काम नहीं करेगा यदि आप पूरे पृष्ठ स्क्रॉलिंग को ब्लॉक करना चाहते हैं, जब कोई div में अतिप्रवाह नहीं होता है उसको अवरुद्ध करने के लिए, तुरंत ऊपर एक के बजाय निम्नलिखित ईवेंट हैंडलर का उपयोग करें ( इस प्रश्न से अनुकूलित):

 $('body').on('touchmove', selScrollable, function(e) { // Only block default if internal div contents are large enough to scroll // Warning: scrollHeight support is not universal. (https://stackoverflow.com/a/15033226/40352) if($(this)[0].scrollHeight > $(this).innerHeight()) { e.stopPropagation(); } }); 

टायलर डॉज के उत्कृष्ट उत्तर का इस्तेमाल करते हुए मेरे आईपैड पर लटका रहे थे, इसलिए मैंने कुछ थ्रॉटलिंग कोड जोड़े, अब यह बहुत चिकनी है स्क्रॉलिंग करते समय कभी-कभी कुछ न्यूनतम लंघन होते हैं।

 // Uses document because document will be topmost level in bubbling $(document).on('touchmove',function(e){ e.preventDefault(); }); var scrolling = false; // Uses body because jquery on events are called off of the element they are // added to, so bubbling would not work if we used document instead. $('body').on('touchstart','.scrollable',function(e) { // Only execute the below code once at a time if (!scrolling) { scrolling = true; if (e.currentTarget.scrollTop === 0) { e.currentTarget.scrollTop = 1; } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { e.currentTarget.scrollTop -= 1; } scrolling = false; } }); // Prevents preventDefault from being called on document if it sees a scrollable div $('body').on('touchmove','.scrollable',function(e) { e.stopPropagation(); }); 

साथ ही, निम्नलिखित सीएसएस को जोड़ने से कुछ रेंडरिंग ग्लिच ( स्रोत ) को हल किया जा सकता है:

 .scrollable { overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .scrollable * { -webkit-transform: translate3d(0,0,0); } 

पहले हमेशा की तरह अपने पूरे दस्तावेज़ पर डिफ़ॉल्ट कार्रवाई रोकें:

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

फिर अपने स्तर के तत्वों को दस्तावेज़ स्तर तक प्रचारित करने से रोकें यह उपरोक्त समारोह तक पहुंचने से रोकता है और इस प्रकार e.preventDefault () शुरू नहीं की जाती है:

 $('.scrollable').bind('touchmove', function(e){ e.stopPropagation(); }); 

यह प्रणाली सभी स्पर्श चाल पर वर्ग की गणना की तुलना में अधिक प्राकृतिक और कम गहन लगती है डायनामिक रूप से जेनरेट किए गए तत्वों के लिए। () के बजाय .on () का उपयोग करें।

इन मेटा टैग पर विचार करें कि दुर्भाग्यपूर्ण चीजों को अपने स्क्रॉल डिवा का उपयोग करते हुए होने से रोकने के लिए:

 <meta content='True' name='HandheldFriendly' /> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport' /> <meta name="viewport" content="width=device-width" /> 

क्या आप केवल अपने ओवरस्कॉल को अक्षम करने वाले कोड में थोड़ा और तर्क जोड़ सकते हैं, यह सुनिश्चित करने के लिए कि प्रश्न में लक्षित तत्व एक नहीं है जिसे आप स्क्रॉल करना चाहते हैं? कुछ इस तरह:

 document.body.addEventListener('touchmove',function(e){ if(!$(e.target).hasClass("scrollable")) { e.preventDefault(); } }); 

जांचें कि स्क्रॉल करने वाला तत्व पहले से ऊपर तक स्क्रॉल किया गया है जब नीचे स्क्रॉल करने की कोशिश करते समय ऊपर की ओर या नीचे की ओर जा रहा है और फिर पूरे पृष्ठ को चलने से रोकने के लिए डिफ़ॉल्ट कार्य को रोकना।

 var touchStartEvent; $('.scrollable').on({ touchstart: function(e) { touchStartEvent = e; }, touchmove: function(e) { if ((e.originalEvent.pageY > touchStartEvent.originalEvent.pageY && this.scrollTop == 0) || (e.originalEvent.pageY < touchStartEvent.originalEvent.pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)) e.preventDefault(); } }); 

जब एक स्क्रॉल करने योग्य क्षेत्र (एक "शॉपिंग कार्ट" पॉपडाउन जो आपके कार्ट का स्क्रॉल करने योग्य दृश्य है) के साथ एक पॉपअप है, तो मैं सभी शरीर को स्क्रॉल करने से रोकने के लिए एक मार्ग की तलाश कर रहा था।

जब आपके पास एक पॉपअप या डिवीज़ होता है जिसे आप स्क्रॉल करना चाहते हैं (और "ओवरस्कॉल" पूरे पृष्ठ बॉडी नहीं है) तो मैं बस अपने शरीर पर "noscroll" वर्ग को टॉगल करने के लिए न्यूनतम जावास्क्रिप्ट का उपयोग करके एक बहुत अधिक खूबसूरत समाधान लिखा है।

जबकि डेस्कटॉप ब्राउज़रों अतिप्रवाह दिखते हैं: छिपा हुआ – IOS को अनदेखा लगता है कि जब तक आप तय करने के लिए स्थिति निर्धारित नहीं करते … जिसके कारण संपूर्ण पृष्ठ एक अजीब चौड़ाई हो, तो आपको स्थिति और चौड़ाई मैन्युअल रूप से भी सेट करनी होगी। इस सीएसएस का उपयोग करें:

 .noscroll { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; } 

और इस jquery:

 /* fade in/out cart popup, add/remove .noscroll from body */ $('a.cart').click(function() { $('nav > ul.cart').fadeToggle(100, 'linear'); if ($('nav > ul.cart').is(":visible")) { $('body').toggleClass('noscroll'); } else { $('body').removeClass('noscroll'); } }); /* close all popup menus when you click the page... */ $('body').click(function () { $('nav > ul').fadeOut(100, 'linear'); $('body').removeClass('noscroll'); }); /* ... but prevent clicks in the popup from closing the popup */ $('nav > ul').click(function(event){ event.stopPropagation(); }); 

मैं jquery बिना एक छोटे से कामकाजी काम किया है परिधि नहीं है लेकिन ठीक काम करता है (विशेषकर यदि आपके पास स्कॉल-वाई में स्क्रॉल-एक्स है) https://github.com/pinadesign/overscroll/

भाग लेने और सुधार करने में विफल रहे

इसका सबसे अच्छा समाधान सीएसएस / html है: अपने तत्वों को लपेटने के लिए एक डिवा बनाएं, अगर इसे पहले से न हो और उसे तय और अतिप्रवाह छिपा स्थान पर रख दिया जाए वैकल्पिक, सेट ऊंचाई और चौड़ाई 100% अगर आप इसे पूरी स्क्रीन भरना चाहते हैं और पूरी स्क्रीन पर कुछ नहीं

 #wrapper{ height: 100%; width: 100%; position: fixed; overflow: hidden; } 
 <div id="wrapper"> <p>All</p> <p>Your</p> <p>Elements</p> </div> 

इस समाधान के लिए आपको अपने सभी स्क्रॉल डिवाओं पर स्क्रॉल करने योग्य वर्ग की आवश्यकता नहीं होती है, ताकि अधिक सामान्य हो। सभी तत्वों पर स्क्रॉलिंग की अनुमति है जो कि, या बच्चे हैं, INPUT तत्वों में संतोषजनक और अतिप्रवाह स्क्रॉल या ऑटो।

मैं कस्टम चयनकर्ता का उपयोग करता हूं और मैं प्रदर्शन में सुधार करने के लिए तत्व में जांच के परिणाम को भी कैश करता हूं। हर समय एक ही तत्व की जांच करने की आवश्यकता नहीं है। इसमें कुछ ही समस्याएं हो सकती हैं जैसे कि सिर्फ लिखित लेकिन सोचा कि मैं साझा करता हूं।

 $.expr[':'].scrollable = function(obj) { var $el = $(obj); var tagName = $el.prop("tagName"); return (tagName !== 'BODY' && tagName !== 'HTML') && (tagName === 'INPUT' || $el.is("[contentEditable='true']") || $el.css("overflow").match(/auto|scroll/)); }; function preventBodyScroll() { function isScrollAllowed($target) { if ($target.data("isScrollAllowed") !== undefined) { return $target.data("isScrollAllowed"); } var scrollAllowed = $target.closest(":scrollable").length > 0; $target.data("isScrollAllowed",scrollAllowed); return scrollAllowed; } $('body').bind('touchmove', function (ev) { if (!isScrollAllowed($(ev.target))) { ev.preventDefault(); } }); } 

सभी "टचमोव" ईवेंट को अक्षम करते समय एक अच्छा विचार हो सकता है, जैसे ही आपको पृष्ठ पर अन्य स्क्रॉल करने वाले तत्वों की आवश्यकता होती है, इसलिए यह समस्याएं पैदा करेगा। इसके ऊपर, यदि आप केवल कुछ तत्वों पर "टच-ओव" ईवेंट को अक्षम करते हैं (जैसे बॉडी को आप स्क्रॉल करने वाले पृष्ठ चाहते हैं), जैसे ही इसे कहीं भी सक्षम किया जाता है, IOS क्रोम में अटूट प्रसार का कारण होगा, जब यूआरएल बार टॉगल

हालांकि मैं इस व्यवहार की व्याख्या नहीं कर सकता, ऐसा लगता है कि रोकने का एकमात्र तरीका शरीर की स्थिति fixed करने के लिए सेट करता है एकमात्र समस्या यह रही है कि आप दस्तावेज़ की स्थिति खो देंगे – यह विशेष रूप से उदाहरण के लिए मोडल्स में परेशान है। इसे सुलझाने का एक तरीका यह सरल वेनिलाज एस फ़ंक्शंस का उपयोग करना होगा:

 function disableDocumentScrolling() { if (document.documentElement.style.position != 'fixed') { // Get the top vertical offset. var topVerticalOffset = (typeof window.pageYOffset != 'undefined') ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : 0); // Set the document to fixed position (this is the only way around IOS' overscroll "feature"). document.documentElement.style.position = 'fixed'; // Set back the offset position by user negative margin on the fixed document. document.documentElement.style.marginTop = '-' + topVerticalOffset + 'px'; } } function enableDocumentScrolling() { if (document.documentElement.style.position == 'fixed') { // Remove the fixed position on the document. document.documentElement.style.position = null; // Calculate back the original position of the non-fixed document. var scrollPosition = -1 * parseFloat(document.documentElement.style.marginTop); // Remove fixed document negative margin. document.documentElement.style.marginTop = null; // Scroll to the original position of the non-fixed document. window.scrollTo(0, scrollPosition); } } 

इस समाधान का उपयोग करके आप एक निश्चित दस्तावेज़ प्राप्त कर सकते हैं और आपके पृष्ठ में कोई अन्य तत्व सरल सीएसएस (जैसे, overflow: scroll; ) का उपयोग करके अतिप्रवाह कर सकता है। विशेष कक्षाएं या कुछ और की आवश्यकता नहीं है

यहाँ एक zepto संगत समाधान है

  if (!$(e.target).hasClass('scrollable') && !$(e.target).closest('.scrollable').length > 0) { console.log('prevented scroll'); e.preventDefault(); window.scroll(0,0); return false; } 

यह मेरे लिए काम करता है (सादे जावास्क्रिप्ट)

 var fixScroll = function (className, border) { // className = class of scrollElement(s), border: borderTop + borderBottom, due to offsetHeight var reg = new RegExp(className,"i"); var off = +border + 1; function _testClass(e) { var o = e.target; while (!reg.test(o.className)) if (!o || o==document) return false; else o = o.parentNode; return o;} document.ontouchmove = function(e) { var o = _testClass(e); if (o) { e.stopPropagation(); if (o.scrollTop == 0) { o.scrollTop += 1; e.preventDefault();}}} document.ontouchstart = function(e) { var o = _testClass(e); if (o && o.scrollHeight >= o.scrollTop + o.offsetHeight - off) o.scrollTop -= off;} } fixScroll("fixscroll",2); // assuming I have a 1px border in my DIV 

एचटीएमएल:

 <div class="fixscroll" style="border:1px gray solid">content</div> 

यह कोशिश करो यह सही काम करेगा

 $('body.overflow-hidden').delegate('#skrollr-body','touchmove',function(e){ e.preventDefault(); console.log('Stop skrollrbody'); }).delegate('.mfp-auto-cursor .mfp-content','touchmove',function(e){ e.stopPropagation(); console.log('Scroll scroll'); }); 

मैं सरल के साथ आश्चर्य की बात भाग्य था:

 body { height: 100vh; } 

यह पॉप-अप या मेनू के लिए ओवरस्कॉल अक्षम करने के लिए महान काम करता है और यह ब्राउज़र बार को स्थिति का उपयोग करते समय प्रकट होने के लिए बाध्य नहीं करता है: फिक्स्ड लेकिन – आपको निश्चित ऊंचाई को सेट करने और पॉप-अप छुपाते समय इसे पुनर्स्थापित करने से पहले स्क्रॉल की स्थिति को सहेजना होगा, अन्यथा, ब्राउज़र शीर्ष पर स्क्रॉल करेगा