एक एसपीए जहां <body> रबर बैंडिंग अनुभव से विकर्षित गया था के साथ हाल ही में एक ही मुद्दे में Ran, लेकिन मैं उप-क्षेत्रों में स्क्रॉल की जरूरत है। डीक्वार्ड के सुझावों के लिए बहुत धन्यवाद, क्योंकि विधि 1 ने मेरे लिए सबसे अच्छा काम किया है।
// Prevent rubber-banding of the body, but allow for scrolling elements
$('body').on('touchmove', function (e) {
var searchTerms = '.scroll, .scroll-y, .scroll-x',
$target = $(e.target),
parents = $target.parents(searchTerms);
if (parents.length || $target.hasClass(searchTerms)) {
// ignore as we want the scroll to happen
// (This is where we may need to check if at limit)
} else {
e.preventDefault();
}
});
और: यहाँ उनके सुझाव है कि मैं काम के लिए एक परियोजना में लागू की मेरी छोटी विस्तार है कि किसी भी तत्व (न केवल divs) उस पर एक .scroll वर्ग है कि खोजने के लिए सभी तरह से पेड़ पर दिखता है
body {
height: 100%;
overflow: hidden;
}
.scroll, .scroll-y, .scroll-x {
-webkit-overflow-scrolling: touch;
}
.scroll > *, .scroll-y > *, .scroll-x > * {
-webkit-transform : translateZ(0);
}
.scroll { overflow: auto; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }
आप केवल एक पुस्तकालय (jQuery या Zepto) की जरूरत है और आप गति और शरीर पर कोई रबर बैंडिंग के साथ देशी स्क्रॉल मिलती है: यहाँ की तरह क्या सीएसएस दिखता है। साथ ही, मैंने स्क्रॉलिंग के दौरान गायब होने वाले तत्वों के साथ कुछ मुद्दों को ठीक करने के लिए translateZ जोड़ा है और इसका उपयोग GPU accelerate your elements पर किया जा सकता है।
लेकिन (और यह एक बड़ा है लेकिन), जैसा कि डीक्वार्ड पॉइंट आउट होता है, पूरे पृष्ठ रबड़ बैंड जब स्क्रॉल तत्व इसकी सीमा पर होता है और आगे स्क्रॉल करने का प्रयास करता है। निजी तौर पर, मैं इसे एक विफलता मानता हूं इसलिए मैं इस पर काम करना जारी रखता हूं, बस इसे समझने की कोशिश करने में पिच करना चाहता था। ओपी के कोड की लाइनों के साथ एक चेक जोड़ना जवाब हो सकता है, लेकिन मैंने कोशिश नहीं की है।
अद्यतन (10/7/12):
काम के बहुत सारे के बाद, मैं निम्नलिखित कोड iOS6 में पूरी तरह से काम कर मिल गया है (और कुछ में परीक्षण नहीं किया)। शरीर पर कोई रबड़-बैंडिंग नहीं, स्क्रॉल क्षेत्र की सीमा पर कोई और समस्या नहीं है, और इसमें मूल स्क्रॉलिंग प्रदर्शन है। जाहिर है यह मूल रूप से बहुत अधिक कोड है, लेकिन मुझे लगता है कि यह ओपी के लक्ष्यों के निकट व्यवहार करेगा।
(function registerScrolling($) {
var prevTouchPosition = {},
scrollYClass = 'scroll-y',
scrollXClass = 'scroll-x',
searchTerms = '.' + scrollYClass + ', .' + scrollXClass;
$('body').on('touchstart', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
// Store previous touch position if within a scroll element
prevTouchPosition = $scroll.length ? { x: targetTouch.pageX, y: targetTouch.pageY } : {};
});
$('body').on('touchmove', function (e) {
var $scroll = $(e.target).closest(searchTerms),
targetTouch = e.originalEvent.targetTouches[0];
if (prevTouchPosition && $scroll.length) {
// Set move helper and update previous touch position
var move = {
x: targetTouch.pageX - prevTouchPosition.x,
y: targetTouch.pageY - prevTouchPosition.y
};
prevTouchPosition = { x: targetTouch.pageX, y: targetTouch.pageY };
// Check for scroll-y or scroll-x classes
if ($scroll.hasClass(scrollYClass)) {
var scrollHeight = $scroll[0].scrollHeight,
outerHeight = $scroll.outerHeight(),
atUpperLimit = ($scroll.scrollTop() === 0),
atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight);
if (scrollHeight > outerHeight) {
// If at either limit move 1px away to allow normal scroll behavior on future moves,
// but stop propagation on this move to remove limit behavior bubbling up to body
if (move.y > 0 && atUpperLimit) {
$scroll.scrollTop(1);
e.stopPropagation();
} else if (move.y < 0 && atLowerLimit) {
$scroll.scrollTop($scroll.scrollTop() - 1);
e.stopPropagation();
}
// If only moving right or left, prevent bad scroll.
if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){
e.preventDefault()
}
// Normal scrolling behavior passes through
} else {
// No scrolling/adjustment when there is nothing to scroll
e.preventDefault();
}
} else if ($scroll.hasClass(scrollXClass)) {
var scrollWidth = $scroll[0].scrollWidth,
outerWidth = $scroll.outerWidth(),
atLeftLimit = $scroll.scrollLeft() === 0,
atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth;
if (scrollWidth > outerWidth) {
if (move.x > 0 && atLeftLimit) {
$scroll.scrollLeft(1);
e.stopPropagation();
} else if (move.x < 0 && atRightLimit) {
$scroll.scrollLeft($scroll.scrollLeft() - 1);
e.stopPropagation();
}
// If only moving up or down, prevent bad scroll.
if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){
e.preventDefault();
}
// Normal scrolling behavior passes through
} else {
// No scrolling/adjustment when there is nothing to scroll
e.preventDefault();
}
}
} else {
// Prevent scrolling on non-scrolling elements
e.preventDefault();
}
});
})(jQuery);
मैं बिल्कुल वैसा ही सवाल है से div आप को रोकने के लिए चाहते हैं के लिए एक
-webkit-overflow-scrolling: auto;जोड़ने! –मैं भी इसका उत्तर ढूंढ रहा हूं। डेस्कटॉप सफारी पर यह 'बॉडी {ओवरफ्लो: छुपा हुआ सेट करने में मदद करता है; ऊंचाई: 100%;} 'लेकिन यह आईओएस पर काम नहीं करता है। – Pascal
जिज्ञासा से बाहर, आप इसे क्यों अक्षम करना चाहते हैं? – Fresheyeball