एचटीएमएल/जावास्क्रिप्ट: स्क्रीन रोटेशन के बाद स्क्रॉल स्थिति ठीक करें

Question

स्क्रीन घुमाए जाने के बाद HTML दस्तावेज़ में स्क्रॉल स्थिति को पुनर्स्थापित करने का सबसे अच्छा तरीका क्या है? (यह कोको टच UIWebView में है, लेकिन मुझे लगता है कि यह हर जगह एक समस्या है।) डिफ़ॉल्ट व्यवहार y-ऑफसेट को पिक्सल में पुनर्स्थापित करना प्रतीत होता है, लेकिन चूंकि पाठ को अस्वीकार कर दिया गया है, यह अब दस्तावेज़ में एक अलग स्थिति है।

1. काली मिर्च अदृश्य, विशिष्ट id'ed तत्वों के साथ दस्तावेज़:

   मेरे प्रारंभिक सोचा है।

2. घूर्णन से पहले, तत्व ई के लिए खोजें जिसका वाई-ऑफ़सेट स्क्रॉल ऑफसेट के सबसे नज़दीक है।
3. रोटेशन के बाद, स्क्रॉल ऑफसेट को ई के नए वाई-ऑफ़सेट पर अपडेट करें।

भले ही यह काम करता है, मैं दस्तावेज़ में क्रूड का एक गुच्छा डालना पसंद नहीं करूंगा। क्या कोई बेहतर तरीका है?

---

समस्या को स्पष्ट करने के लिए यहां एक आरेख है। मूल वाई-ऑफसेट को पुनर्स्थापित करना इच्छित परिणाम उत्पन्न नहीं करता है क्योंकि अधिक टेक्स्ट लैंडस्केप मोड में एक पंक्ति पर फिट बैठता है।

Answer 1

सुंदर नहीं है लेकिन यह काम करता है। इस दस्तावेज़ दस्तावेज़ में स्पैन टैग होने की आवश्यकता है।

// Return the locator ID closest to this height in pixels. 
function findClosestLocator(height) { 
    var allSpans = document.getElementsByTagName("span"); 
    var closestIdx = 0; 
    var closestDistance = 999999; 
    for(var i = 0; i < allSpans.length; i++) { 
     var span = allSpans[i]; 
     var distance = Math.abs(span.offsetTop - height); 
     if(distance < closestDistance) { 
      closestIdx = i; 
      closestDistance = distance; 
     } 
    } 
    return allSpans[closestIdx].id; 
} 

रोटेशन के बाद, document.getElementById(spanId).offsetTop है नई y-ऑफसेट, जहां spanIdfindClosestLocator() रोटेशन से पहले का परिणाम है।

Answer 2

वैचारिक समस्या इतनी के बारे में सोचना कठिन नहीं है। आपके पास स्क्रॉल इवेंट्स, रोटेशन इवेंट्स और वेरिएबल्स हैं। मैं scroll.op पर scrollTop स्थिति को ट्रैक करता हूं। स्क्रॉल ईवेंट पर डोम नोड। अभिविन्यास घटना आग के साथ इसे दोबारा दोहराएं।

शायद ऐसा कुछ।

// Track position 
var pos; 

// On scroll update position 
document.body.addEventListener("scroll", function() { 
    pos = document.body.scrollTop; 
}, true); 

// On rotation apply the scroll position 
window.addEventListener("orientationchange", function() { 
    document.body.scrollTop = pos; 
}, true);