मैं एक ब्राउज़र आधारित ऐप पर काम कर रहा हूं, वर्तमान में मैं आईपैड सफारी ब्राउज़र के लिए विकास और स्टाइल कर रहा हूं।आईपैड सफारी: स्क्रॉलिंग अक्षम करें, और बाउंस प्रभाव?
मैं आईपैड पर दो चीजों की तलाश में हूं: मैं उन पृष्ठों के लिए वर्टिकल स्क्रॉलिंग कैसे अक्षम कर सकता हूं जिनकी आवश्यकता नहीं है? & मैं लोचदार बाउंस प्रभाव को कैसे अक्षम कर सकता हूं?
2011 जवाब: आईओएस सफारी के अंदर चल रहा है एक वेब/HTML एप्लिकेशन के लिए आप चाहते हैं कुछ की तरह
document.ontouchmove = function(event){
event.preventDefault();
}
iOS 5 के लिए आप इन बातों का ले जाना चाहते हो सकता है: document.ontouchmove and scrolling on iOS 5
अद्यतन सितंबर 2014: यहां एक और अधिक संपूर्ण दृष्टिकोण पाया जा सकता है: https://github.com/luster-io/prevent-overscroll। कि और उपयोगी webapp सलाह की एक पूरी बहुत कुछ के लिए, देखें http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
अद्यतन मार्च 2016: यही कारण है कि पिछले लिंक अब सक्रिय नहीं है - https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html संग्रहीत संस्करण के लिए बजाय देखते हैं। उस बिंदु को इंगित करने के लिए धन्यवाद @ फ़ल्सारेला।
आप यह करने के लिए इस jQuery कोड का उपयोग कर सकते हैं:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
इस ऊर्ध्वाधर स्क्रॉल और भी वापस किसी भी उछाल प्रभाव अपने पृष्ठों पर होने वाली रोकेंगे।
यह जावास्क्रिप्ट नहीं है, यह jQuery है। आपको इसका जिक्र करना चाहिए, हर कोई उस ढांचे का उपयोग नहीं कर रहा है। – inta
बस संपादित किया गया –
मैं क्षैतिज उछाल को कैसे रोक सकता हूं या –
मुझे पता है कि यह थोड़ा ऑफ-पिस्ट है लेकिन मैं फ्लैश को एक इंटरैक्टिव एचटीएमएल 5 गेम में बदलने के लिए स्विफी का उपयोग कर रहा हूं और उसी स्क्रॉलिंग मुद्दे पर आया लेकिन मुझे कोई समाधान नहीं मिला।
मेरी समस्या यह थी कि स्विफी मंच पूरी स्क्रीन ले रहा था, जैसे ही इसे लोड किया गया था, दस्तावेज़ टचमोव घटना कभी ट्रिगर नहीं हुई थी।
यदि मैंने एक ही घटना को स्विफी कंटेनर में जोड़ने की कोशिश की, तो चरण को लोड होने के तुरंत बाद इसे बदल दिया गया।
अंत में मैंने चरण के भीतर प्रत्येक डीवीवी में टचमोव घटना को लागू करके इसे (बल्कि गड़बड़) हल किया। चूंकि ये divs भी बदल रहे थे, मुझे उन्हें जांचने की जरूरत थी।
यह मेरा समाधान था, जो अच्छी तरह से काम करता प्रतीत होता है। मुझे उम्मीद है कि यह मेरे लिए एक ही समाधान खोजने की कोशिश कर रहा है।
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
यह आईपैड –
overflow: scroll;
-webkit-overflow-scrolling: touch;
कंटेनर आप तत्व के अंदर उछाल प्रभाव सेट कर सकते हैं पर
स्रोत: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
तुम भी तय करने के लिए शरीर/html की स्थिति बदल सकते हैं:
body,
html {
position: fixed;
}
में पूरी स्क्रॉल को अक्षम करता है यह वास्तव में आईपैड आईओएस 8.2 सफारी पर बहुत अच्छा काम करता है; अब कोई बाउंस प्रभाव नहीं है। –
ऐसा करने का सबसे अच्छा तरीका मैंने अब तक देखा है – hildende
यदि आप स्थिति के साथ कुछ जगह रखना चाहते हैं तो काम नहीं करता है: पूर्ण और सभी पक्ष 0 पर सेट (पूर्णस्क्रीन div बनाने के लिए) - आपका पूरा दस्तावेज़ कुछ भी नहीं हो जाता है। – riv
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();
}
});
डिफ़ॉल्ट टच इवेंट श्रोताओं को अलग किए बिना डिफ़ॉल्ट सफारी स्क्रॉलिंग और बाउंस जेस्चर को रोकता है।
यह वेब एप को पूरी तरह से बॉडी तत्व पर स्क्रॉल करने से रोकता है। – MartijnICU
कोई भी समाधान मेरे लिए काम नहीं करता है। यह मेरा इसे करने का तरीका है।
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
मैं करूंगा .the_element_that_you_want_to_have_scrolling { स्क्रॉलिंग: स्पर्श करें; } –
नाराज कीवी मैं इसे स्थिति ऊंचाई के बजाय का उपयोग कर काम करने के लिए मिल गया है करने के लिए समान:
html,body {
height: 100%;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
जो लोग MyScript वेब एप्लिकेशन का उपयोग कर रहे हैं और शरीर स्क्रॉल/खींच के साथ संघर्ष कर रहे हैं के लिए (iPad पर और टेबलेट) के बजाय वास्तव में लिखने की:
<body touch-action="none" unresolved>
कि यह मेरे लिए तय की।
आईफोन में परीक्षण किया गया। लक्ष्य तत्व कंटेनर पर बस इस सीएसएस का उपयोग करें और यह स्क्रॉलिंग व्यवहार को बदल देगा, जो उंगली स्क्रीन छोड़ने पर रोकता है।
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
आप js के लिए स्क्रॉल को रोकने का उपयोग कर सकते हैं:
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);
}
}
और की तुलना में सिर्फ चलाने/रोक toggleScroll समारोह जब आप opnen/बंद मोडल।
toggleScroll(true)/toggleScroll(false)
तरह
(यह केवल iOS के लिए है पर Android काम नहीं कर रहा)
मैं webapp आईओएस सफारी के अंदर चल रहा है और मैं ontouchmove घटना को निष्क्रिय करने की कोशिश की है लेकिन यह अभी भी प्रभाव उछाल देखने के लिए अगर कुछ किया हो सकता है सावधानी से। (आईओएस 5) – Nilesh
@ नीलेश: document.ontouchmove * आईओएस सफारी में ऐसा करने का तरीका है। यह संभव है, हालांकि आपके डोमेन में कुछ तत्व दस्तावेज़ प्रोजेक्ट तक पहुंचने से ईवेंट प्रचार को रोक रहा है - http://stackoverflow.com/questions/7798201/document-ontouchmove-and-scrolling-on-ios-5 –
देखें @ नीलेश: आप ऑनटचैंकेल इवेंट को एक बार दे सकते हैं: – mikermcneil