scrollIntoView()
सभी ब्राउज़रों में काम करता है? यदि कोई jQuery
विकल्प नहीं है ?
जवाबों:
जैसा कि @ 9 बिट्स ने बताया, यह लंबे समय से सभी प्रमुख ब्राउज़रों द्वारा समर्थित है । उस बारे में चिंता करने की नहीं। मुख्य समस्या यह है कि यह कैसे काम करता है। यह बस एक विशेष तत्व के लिए कूदता है जो पेज के अंत में भी हो सकता है। इसके लिए कूदने से, उपयोगकर्ताओं को पता नहीं है कि क्या:
पहले दो को स्क्रॉल स्थिति द्वारा निर्धारित किया जा सकता है, लेकिन कौन कहता है कि उपयोगकर्ताओं को स्क्रॉल करने से पहले स्क्रॉल स्थिति का ट्रैक रखा गया था? तो यह एक nondeterministic कार्रवाई है।
अंतिम एक विशेष रूप से सच हो सकता है यदि पृष्ठ में हेडिंग चलती है जो देखने से बाहर हो जाती है और शेष पेज डिज़ाइन एक ही पृष्ठ पर होने का कुछ भी मतलब नहीं रखता है (यदि इसके पास कोई कुल ऊंचाई ऊर्ध्वाधर तत्व नहीं है जैसे कि बाएं मेनू बार)। आपको आश्चर्य होगा कि कितने पृष्ठों में यह समस्या है। बस उन्हें खुद को देखें। किसी पृष्ठ पर जाएं, इसे शीर्ष पर देखें, फिर Endकुंजी दबाएं और इसे फिर से देखें। यह संभावना है कि आप सोचेंगे कि यह एक अलग पृष्ठ है।
scrollintoview
बचाव के लिए एनिमेटेड jQuery प्लगइनयही कारण है कि अभी भी प्लगइन्स हैं जो मूल डोम फ़ंक्शन का उपयोग करने के बजाय स्क्रॉल में प्रदर्शन करते हैं । वे आम तौर पर चेतन स्क्रॉल करते हैं जो ऊपर उल्लिखित सभी 3 मुद्दों को समाप्त करता है। उपयोगकर्ता आसानी से आंदोलन का ट्रैक रख सकते हैं।
ScrollIntoViewOptions
निर्दिष्ट करने की अनुमति देता है के साथ नया चश्मा behavior: 'smooth'
। दुर्भाग्य से वहाँ कोई रास्ता नहीं आसानी से पता लगाने के लिए अगर यह विकल्प एक ब्राउज़र में समर्थित है ...
behavior: "smooth"
, लेकिन क्रोम या सफारी नहीं।
ऐसा लगता है: http://www.quirksmode.org/dom/w3c_cssom.html
मैं Matteo Spinnelli के iScroll-4 का उपयोग करता हूं और यह iOS सफारी में भी काम करता है। इसमें तीन तरीके स्क्रॉलटो, स्क्रोलटॉयमेंट और स्क्रोलटेजेज हैं। मान लें कि आपके पास div के अंदर लिपटे तत्वों की एक अनियंत्रित सूची है। जैसा कि रॉबर्ट कोरिटनिक ने ऊपर लिखा है, आपको उस मामूली एनीमेशन को दिखाने की आवश्यकता है जिसे आपने स्क्रॉल किया है। नीचे दी गई विधि उस प्रभाव को प्राप्त करती है।
scrollToElement(element, time);
यह कोशिश नहीं की है, लेकिन स्क्रॉलबीटो व्यू फ़ंक्शन में निर्मित पिग्गीबैकिंग की तरह लगता है कि यह बहुत कोड को बचाएगा। यदि आप एनिमेटेड कार्रवाई चाहते हैं तो मैं यहां क्या करूंगा: