क्या सभी ब्राउज़रों में स्क्रॉल इनटू व्यू काम करता है?


जवाबों:


82

यह हाँ समर्थित है, लेकिन उपयोगकर्ता अनुभव ... बुरा है।

जैसा कि @ 9 बिट्स ने बताया, यह लंबे समय से सभी प्रमुख ब्राउज़रों द्वारा समर्थित है । उस बारे में चिंता करने की नहीं। मुख्य समस्या यह है कि यह कैसे काम करता है। यह बस एक विशेष तत्व के लिए कूदता है जो पेज के अंत में भी हो सकता है। इसके लिए कूदने से, उपयोगकर्ताओं को पता नहीं है कि क्या:

  • पेज को स्क्रॉल किया गया है
  • पृष्ठ को नीचे स्क्रॉल कर दिया गया है
  • उन्हें कहीं और पुनर्निर्देशित किया गया है

पहले दो को स्क्रॉल स्थिति द्वारा निर्धारित किया जा सकता है, लेकिन कौन कहता है कि उपयोगकर्ताओं को स्क्रॉल करने से पहले स्क्रॉल स्थिति का ट्रैक रखा गया था? तो यह एक nondeterministic कार्रवाई है।

अंतिम एक विशेष रूप से सच हो सकता है यदि पृष्ठ में हेडिंग चलती है जो देखने से बाहर हो जाती है और शेष पेज डिज़ाइन एक ही पृष्ठ पर होने का कुछ भी मतलब नहीं रखता है (यदि इसके पास कोई कुल ऊंचाई ऊर्ध्वाधर तत्व नहीं है जैसे कि बाएं मेनू बार)। आपको आश्चर्य होगा कि कितने पृष्ठों में यह समस्या है। बस उन्हें खुद को देखें। किसी पृष्ठ पर जाएं, इसे शीर्ष पर देखें, फिर Endकुंजी दबाएं और इसे फिर से देखें। यह संभावना है कि आप सोचेंगे कि यह एक अलग पृष्ठ है।

scrollintoviewबचाव के लिए एनिमेटेड jQuery प्लगइन

यही कारण है कि अभी भी प्लगइन्स हैं जो मूल डोम फ़ंक्शन का उपयोग करने के बजाय स्क्रॉल में प्रदर्शन करते हैं । वे आम तौर पर चेतन स्क्रॉल करते हैं जो ऊपर उल्लिखित सभी 3 मुद्दों को समाप्त करता है। उपयोगकर्ता आसानी से आंदोलन का ट्रैक रख सकते हैं।


1
नोट: स्क्रॉल किया गया तत्व iframe (स्पष्ट कारणों के लिए) में है, तो jQuery प्लगइन काम नहीं करता है (दाएं)। element.scrollIntoView तब भी काम करता है।
पणजी

7
ScrollIntoViewOptionsनिर्दिष्ट करने की अनुमति देता है के साथ नया चश्मा behavior: 'smooth'। दुर्भाग्य से वहाँ कोई रास्ता नहीं आसानी से पता लगाने के लिए अगर यह विकल्प एक ब्राउज़र में समर्थित है ...
उड़ान भेड़

6
फ़ायरफ़ॉक्स समर्थन करने के लिए लगता है behavior: "smooth", लेकिन क्रोम या सफारी नहीं।
फ्लिमल

1
यह कस्टम ड्रॉपडाउन मेनू बनाने जैसी चीजों के लिए उपयोगी है जहाँ तीर कुंजी ऊपर / नीचे नियंत्रित होती हैं और चयनित आइटम मेनू स्क्रॉल के आधार पर। यह उस स्थिति में आइटम के बीच तुरंत कूदने के लिए एक बुरा उपयोगकर्ता अनुभव नहीं होगा।
user2867288

1
@ आईएल / एज में न तो। संदर्भ देखें , केवल FF36 + में यह सुविधा है। इस प्रकार, यह बेकार है, दुर्भाग्यपूर्ण है।
एलेक्स


3

मैं Matteo Spinnelli के iScroll-4 का उपयोग करता हूं और यह iOS सफारी में भी काम करता है। इसमें तीन तरीके स्क्रॉलटो, स्क्रोलटॉयमेंट और स्क्रोलटेजेज हैं। मान लें कि आपके पास div के अंदर लिपटे तत्वों की एक अनियंत्रित सूची है। जैसा कि रॉबर्ट कोरिटनिक ने ऊपर लिखा है, आपको उस मामूली एनीमेशन को दिखाने की आवश्यकता है जिसे आपने स्क्रॉल किया है। नीचे दी गई विधि उस प्रभाव को प्राप्त करती है।

scrollToElement(element, time); 

2
iScroll-4 का आपका लिंक मर चुका है
रोमेन विंसेंट

2

आप jQuery के विकल्प और चेतन <html>और <body>तत्वों का उपयोग कर सकते हैं :

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);

1

यह कोशिश नहीं की है, लेकिन स्क्रॉलबीटो व्यू फ़ंक्शन में निर्मित पिग्गीबैकिंग की तरह लगता है कि यह बहुत कोड को बचाएगा। यदि आप एनिमेटेड कार्रवाई चाहते हैं तो मैं यहां क्या करूंगा:

  1. वर्तमान स्थिति के रूप में कंटेनर की वर्तमान स्क्रॉल स्थिति कैश करें
  2. scrollIntoView में बनाया गया है
  3. स्क्रॉल स्थिति को फिर से END स्थिति के रूप में कैश करें
  4. वापस कंटेनर स्टार्ट स्थिति में लौटें
  5. अंत स्थिति के लिए स्क्रॉल चेतन

1

कृपया स्क्रॉल के बारे में पढ़ें

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.