जड़ें स्क्रॉलिंग

Question

के दौरान दो तत्वों के स्क्रॉल ऑफसेट को सिंक्रनाइज़ करने के लिए कैसे करें मुझे किसी तत्व के स्क्रॉल ऑफ़सेट को किसी अन्य (विंडो वास्तव में) के साथ समन्वयित करने की आवश्यकता है और मुझे इनरियल "रोल ऑफ" चरण के दौरान ऐसा करने में परेशानी हो रही है मोबाइल सफारी (आईपैड) पर स्क्रॉलिंग का।

मैं position:fixed; overflow:hidden साथ divs की एक जोड़ी है और मैं उनकी पुस्तक खिड़की के एक साथ सिंक में ऑफसेट रखने की जरूरत है आम तौर पर मैं इसे इस (jQuery) जैसे कोड चाहते हैं (पूरे शरीर पुस्तक जिसका अर्थ है।):

var $win = $(window), 
    $div1 = $(...) 

$win.scroll(function() { 
    $div1.scrollTop($win.scrollTop()) 
}) 

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

मैंने इसे touchmove ईवेंट के साथ ही scroll एक के लिए हैंडलर पंजीकृत करके ड्रैगिंग चरण के लिए हल किया।

लेकिन मुझे जड़ चरण के लिए समस्या को हल करने का कोई तरीका नहीं मिल रहा है। Div तब भी रहता है (और शेष पृष्ठ के साथ धीरे-धीरे सिंक हो जाता है) जब तक कि जड़ें पूरी तरह से नहीं आतीं, जब स्क्रॉल इवेंट आखिरकार निकाल दिया जाता है और यह स्थिति में गिर जाता है।

Here's a working demo.

कोशिश एक iPad पर यह स्क्रॉल करने के लिए "जड़त्वीय scolling" समस्या को देखने के लिए। दुर्भाग्यवश, आईफ़्रेम स्क्रॉलिंग के साथ आईपैड के अजीब व्यवहार के कारण, मैं jsFiddle पर काम नहीं कर सका।

अगर मैं उस चरण के दौरान सिर्फ एक मतदान चला सकता हूं, तो मैं दो तत्वों के बीच सिंक्रनाइज़ेशन की समानता रख सकता हूं। मैंने setTimeout, setInterval, और requestAnimationFrame के साथ प्रयास किया है, लेकिन उनमें से कोई भी जड़ें स्क्रॉलिंग चरण के दौरान आग लगती है। ऐसा लगता है कि उस चरण के दौरान सभी जावास्क्रिप्ट बंद हो जाता है।

सवाल:

• कोई स्पर्श या स्क्रॉल घटना जड़त्वीय स्क्रॉल चरण के दौरान निकाल दिया है?
• क्या कोई चरण उस चरण के दौरान जावास्क्रिप्ट कॉलबैक चलाने के लिए है?
• क्या सीएस या जेएस के अलावा कुछ अन्य तकनीक का उपयोग करते हुए दो तत्वों (या तो एक्स या वाई, दोनों नहीं) के स्क्रॉल ऑफसेट को सिंक करने का कोई तरीका है?

Answer 1

OldDrunkenSailor ने मुझे iScroll का सुझाव देने के लिए हराया।

दुर्भाग्यवश, बॉक्स iScroll से बाहर केवल मूल समस्या को स्क्रॉलिंग के रूप में एक ही समस्या को दोहराता है - जड़ के चरण के दौरान कोई ईवेंट हैंडलिंग नहीं है। मेरी 2nd पीढ़ी iPad पर https://dl.dropbox.com/u/15943645/scrollingdemo.html

बढ़िया काम करता है:

यहाँ भी है कि जड़त्वीय चरण के दौरान आग एक कस्टम घटना जोड़ने के लिए एक बंदर-समझौता iScroll के साथ अपने प्रदर्शन का एक संस्करण है।

जे एस:

// Disable touch events 
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

// Patch iScroll for position change custom event 
iScroll.prototype._oldPos = iScroll.prototype._pos; 
iScroll.prototype._pos = function(x, y) { 
    this._oldPos(x, y); 
    if (this.options.onPositionChange) this.options.onPositionChange.call(this); 
} 

$(function() { 
    var $win = $(window), 
     $div_cols = $('#cols'), 
     $div_rows = $('#rows'), 
     $div_body = $('#body') 

    // attach scrolling sync handler and execute it once 
    function sync_scroll(e) { 
     $div_cols.scrollLeft(0 - $div_body.position().left); 
     $div_rows.scrollTop(0 - $div_body.position().top); 

    }   

    // initialize iScroll on wrapper div, with position change handler 
    var myScroll = new iScroll('iscroll_wrapper', { 
     bounce: false, 
     onPositionChange: sync_scroll 
    }); 
}) 

सीएसएस:

#iscroll_wrapper { 
    position:absolute; 
    z-index: 1; 
    left: 168px; 
    top:77px; 
    bottom:0px; 
    right:0; 
    overflow:auto; 
} 

#body { 
    position:absolute; 
    z-index: 1; 
    width: 2046px; 
    height: 3376px; 

} 

नोट केवल शरीर की घटनाओं को छूने के लिए प्रतिक्रिया करता है, लेकिन आप रिवर्स रिश्ते के लिए पंक्तियों और कॉलम divs करने के लिए तकनीक का विस्तार कर सकते हैं।

Answer 2

स्क्रॉल शुरू होने पर ट्रिगर्स। ध्यान दें कि आईओएस डिवाइस स्क्रॉल के दौरान डीओएम हेरफेर को फ्रीज करते हैं, स्क्रॉल खत्म होने पर उन्हें लागू करने के लिए कतारबद्ध करते हैं। हम वर्तमान में स्क्रॉल शुरू होने से पहले डीओएम मैनिप्लेशंस को लागू करने की अनुमति देने के तरीकों की जांच कर रहे हैं।

http://jquerymobile.com/demos/1.0rc1/docs/api/events.html#/demos/1.0rc1/docs/api/events.html

thats कि वे क्या स्क्रॉल शुरू अनुभाग

Answer 3

आईओएस वास्तव में डोम हेरफेर और जावास्क्रिप्ट जबकि जड़त्वीय स्क्रॉल हो रहा है जमा के तहत कहना था। यहां एक साधारण डेमो है जिसे मैंने सामान्य डेस्कटॉप वातावरण में स्क्रॉलिंग के बीच अंतर को चित्रित करने के लिए बनाया है: http://jsfiddle.net/notjoelshapiro/LUcR6/।इस कोड को केवल इस उस में जेएस है:

var num = 0; 
function updateNum(){ 
    num++; 
    $('#awesomeDiv').text(num); 
} 
$(window).scroll(updateNum); 

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

तो विशेष रूप से आपके सवालों के जवाब:

कोई स्पर्श या स्क्रॉल घटना जड़त्वीय स्क्रॉल चरण के दौरान निकाल दिया है?

नकारात्मक, ghostrider।

क्या उस चरण के दौरान जावास्क्रिप्ट कॉलबैक चलाने का कोई तरीका है?

ऊपर देखें।

क्या सीएसएस या जेएस के अलावा किसी अन्य तकनीक का उपयोग करते हुए दो तत्वों (या तो एक्स या वाई, दोनों नहीं) के स्क्रॉल ऑफसेट को सिंक करने का कोई तरीका है?

यह सुनिश्चित नहीं है कि आप यहां क्या मतलब रखते हैं, जेएस आपको आवश्यक सभी गणित कर सकता है लेकिन यह जरूरी है जब जड़ें स्क्रॉल पूरी हो जाए। यद्यपि ईमानदार होने के लिए, यह टीएल का लक्षण हो सकता है; क्योंकि मैं अभी काम पर हूं।

क्या आपने iScroll लाइब्रेरी देखी है? यह स्पर्श और गैर-स्पर्श वातावरण के लिए अंतःविषय (या गैर-जड़) स्क्रॉलिंग को अनुकरण करता है और आपको "स्क्रॉल" और "जड़ें स्क्रॉल" के दौरान/बाद में जेएस कॉलबैक देता है और आप जिस स्थान पर हैं, उसकी गणना करने के लिए आप बहुत सारी जानकारी प्रदान कर सकते हैं पृष्ठ।