JQuery के ऊर्ध्वाधर पृष्ठ स्क्रॉलिंग और क्रॉस-ब्राउज़र संगतता

निम्नलिखित jQuery का उपयोग करते हुए पेज स्क्रॉलिंग का एक क्रॉस-ब्राउज़र कार्यान्वयन है।

यह सब कैसे शुरू हुआ

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

हम आधार तैयार करते हैं

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

HTML बटन कोड:

 <div id="up"><p class="pPageScroll"></p></div> <div id="down"><p class="pPageScroll"></p></div> 

सीएसएस शैलियों:

#up
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
}
#down
{
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
}
.pPageScroll
{
color:#FFFFFF;
font:bold 12pt 'Comic Sans MS';
text-align:center;
}

नतीजतन, हमारे पास ब्राउज़र के निचले बाएं कोने में शिलालेख "ऊपर" और "नीचे" के साथ दो मंडलियां हैं।

समस्याएं शुरू होती हैं

अब मजेदार हिस्सा शुरू होता है - जावास्क्रिप्ट, या बल्कि jQuery। जैसा कि आप जानते हैं, स्क्रॉलिंग को व्यवस्थित करने के लिए, स्क्रॉलटॉप और स्क्रॉललेफ्ट गुणों पर जोड़तोड़ किए जाते हैं। JQuery में, इन जोड़तोड़ों को क्रमशः .scrollTop () और .scrollLeft () विधियों का उपयोग करके किया जाता है। हम केवल .scrollTop में रुचि रखते हैं।
पहला, सबसे सरल स्क्रॉलिंग विकल्प इस प्रकार था:

// ""
$("#up").click(function(){
//
$("body").animate({"scrollTop":0},"slow");
});

// ""
$("#down").click(function(){
//
var height=$("body").height();
$("body").animate({"scrollTop":height},”slow”);
});

सब कुछ, ठीक है, बहुत सरल और सरल। लेकिन, यह बहुत बुरा है, अगर क्रोम में सब कुछ बहुत ही क्लाउडलेस और प्यारा था, तो आपरेट में भी यह काफी सहनीय था (तुरन्त स्क्रॉल किया गया), तो हार्मफुल फॉक्स ने पूरी तरह से छोड़ने से इनकार कर दिया। बिना किसी हिचकिचाहट के, पंक्ति में जगह: $ ("शरीर")। "html" के साथ चेतन "शरीर", मैंने स्थिति को नाटकीय रूप से बदल दिया: फ़ायरफ़ॉक्स ने काम किया, ओपेरा ने झटके मारना बंद कर दिया और इसे आसानी से करना शुरू कर दिया, लेकिन अब क्रोम ने जवाब देना बंद कर दिया। बटन जोड़तोड़। ऊपर दिए गए अध्यादेश से, निम्न विकल्प सभी ब्राउज़रों द्वारा पच गया था: $ ("html, बॉडी")। चेतन ... सभी ब्राउज़रों में काम करने का कोई अन्य स्वीकार्य तरीका नहीं मिला।

रफ़ल और धनुष जोड़ें

सबसे सरल भाग के साथ। बुनियादी कार्यक्षमता प्राप्त की जाती है, अब आप कुछ और दिलचस्प के साथ आ सकते हैं। आपकी आंख को पकड़ने वाली पहली चीज स्क्रॉलिंग की गति है। किसी भी समृद्ध सामग्री की उपस्थिति में, मिर्गी की प्रवृत्ति के लिए स्क्रॉलिंग का उपयोग एक वास्तविक परीक्षा बन जाता है। इसलिए, मैं चाहता हूं कि स्क्रॉल स्मूथ हो। माथे में निर्णय, एक निश्चित समय निरंतर निर्धारित करने के लिए जिसके लिए स्क्रॉल किया जाना चाहिए। स्पष्ट प्लस: प्राथमिक निर्णय। कोई कम स्पष्ट ऋण नहीं: किसी भी तरह से सामग्री की मात्रा को ध्यान में नहीं रखा जाता है। एक स्मार्ट समाधान: सामग्री के आकार के आधार पर स्क्रॉलिंग समय की गणना करें। चलिए शुरू करते हैं।
दोनों बटन के कोड में आपको वर्तमान स्थिति की गणना करने की आवश्यकता है। JQuery () विधि .scrollTop () बस इसके लिए उपयोग किया जाता है।
यहां, पहले से ज्ञात समस्याएं दिखाई देती हैं: $ ("बॉडी")। स्क्रॉलटॉप () केवल क्रोम में काम करता है, $ ("html")। स्क्रॉलटॉप () क्रोम में काम नहीं करता है। जो, आम तौर पर बोल रहा है, आश्चर्य की बात है, क्योंकि यह पता चलता है कि निर्माण $ ("शरीर") के साथ है। ओपेरा में चेतन ({"स्क्रॉलटॉप": ऊंचाई}, "धीमी"), हम शरीर को स्क्रॉल कर सकते हैं, और जब प्राप्त होता है, तो शरीर टैग की स्क्रॉलटेम्पलेट संपत्ति होती है। शून्य, जो, तत्व के वर्णन से देखते हुए। स्क्रॉलटॉप उन तत्वों के लिए मान्य है जिन्हें स्क्रॉल नहीं किया जा सकता है।
$ ("बॉडी, html")। स्क्रॉलटॉप () विकल्प, स्पष्ट कारणों के लिए, हमें सूट नहीं करता है। हम विकल्प की तलाश कर रहे हैं। यह पता चला है कि खिड़की और दस्तावेज़ ऑब्जेक्ट से वर्तमान स्थिति प्राप्त की जा सकती है, ताकि यह सभी ब्राउज़रों को सूट करे। मुझे लगता है कि यह उल्लेख किया जाना चाहिए कि उनका उपयोग एनीमेशन के लिए किया जा रहा है (उदाहरण के लिए, इस तरह: $ (दस्तावेज़)। अंतरंग।) कुछ भी अच्छा नहीं होगा।
इसलिए, वर्तमान स्थिति का पता लगाने के कार्यशील संस्करण के लिए, हम लेते हैं: $ (दस्तावेज़) .scrollTop ();
अब हम सोचते हैं कि हम समय की गणना कैसे करेंगे। सामान्यतया, समाधान तुच्छ है और हर कोई जानता है: समय = पथ / गति। पथ का निर्धारण करने के लिए, हमें बस वर्तमान स्थिति की आवश्यकता है। साथ ही, गंतव्य बिंदु के निर्देशांक की आवश्यकता होती है। अप बटन के साथ, सब कुछ सरल है, ऊर्ध्वाधर अक्ष के साथ गंतव्य बिंदु का समन्वय शून्य है, जिसका अर्थ है कि पथ वर्तमान स्थिति के बराबर है। "डाउन" बटन के लिए, सब कुछ थोड़ा अधिक जटिल है, हमें दस्तावेज़ की "ऊंचाई" प्राप्त करने की आवश्यकता है। पहले से ही समस्याओं की आशंका है, है ना? लेकिन नहीं, यहां सब कुछ बहुत सरल है। पूरी तरह से उपयुक्त ऊंचाई "बॉडी", "एचटीएमएल" या एक चयनकर्ता के रूप में दस्तावेज़ का उपयोग करके प्राप्त की जा सकती है।
So. हमारे पास एक रास्ता है, अब हमें गति की आवश्यकता है। यहाँ सब कुछ आप पर निर्भर है। दृश्य अनुमानों के अनुसार, 1.73 की गति मुझे आरामदायक लग रही थी (आंकड़ा कोई भी नहीं है, चाहे कितना भी गंभीर औचित्य हो, और आंख मारने का नाटक किया गया)।

अंतिम विकल्प

इस प्रकार, कार्य कोड निम्नानुसार है:

$(document).ready(function(){
// ""
$("#up").click(function(){
//
var curPos=$(document).scrollTop();
var scrollTime=curPos/1.73;
$("body,html").animate({"scrollTop":0},scrollTime);
});

// ""
$("#down").click(function(){
//
var curPos=$(document).scrollTop();
var height=$("body").height();
var scrollTime=(height-curPos)/1.73;
$("body,html").animate({"scrollTop":height},scrollTime);
});
});

इसके अतिरिक्त, गुणांक को माउंट करना संभव है जो अधिक लचीलापन प्रदान करने के लिए पथ के आधार पर समय या गति बढ़ाएगा, लेकिन मैं वहां नहीं रुकूंगा।

सारांश

नतीजतन, हमें पृष्ठ स्क्रॉलिंग का एक बहुत ही सरल कार्यान्वयन मिला, जो किसी भी आधुनिक ब्राउज़र में काम करता है।
DOCTYPE के लिए टेस्ट आयोजित किए गए थे: क्रोम 10, ओपेरा 10, ओपेरा 11, फ़ायरफ़ॉक्स 4, इंटरनेट एक्सप्लोरर 8, इंटरनेट एक्सप्लोरर 9 ब्राउज़र में XHTML 1.0 सख्त।

कुछ समस्याएं:

• सीमा-त्रिज्या, जैसा कि आप जानते हैं, IE8 में काम नहीं करता है, लेकिन क्रॉस-ब्राउज़र लेआउट इस विषय का विषय नहीं है।
• ओपेरा 10 में, एक निर्देश: $ ("बॉडी, html")। चेतन ({"स्क्रॉलटॉप": 0}, स्क्रॉलटाइम); पृष्ठ के शीर्ष पर तात्कालिक कूद जाता है। यह समस्या ओपेरा 11 में संक्रमण के साथ गायब हो जाती है।

UPD: अंतिम उदाहरण तय किया।