जावास्क्रिप्ट स्क्रॉल पर निकालें वर्ग जोड़ें

| | | | | | | | | | | | | | | | | |

स्क्रॉल बार और उपयोगकर्ता अनुभव

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

कल्पना करें कि अगर कोई स्क्रॉल बार होता, लेकिन जब आप अपने माउस या स्लाइड पर स्क्रॉल बटन को घुमाते हैं आपकी उंगली आपके डिवाइस के टचपैड पर, कुछ नहीं होता। इसे एक भयानक उपयोगकर्ता अनुभव माना जाएगा।

क्या - जो एक अच्छा उपयोगकर्ता अनुभव बनाता है या तोड़ता है वह अपने आप में एक काम हो सकता है, लेकिन इसका एक हिस्सा - यह काम करता है बहुत निश्चित रूप से क्षमता और बार सौंदर्य कारणों से छिपाने के लिए स्क्रॉल करते हैं।

स्क्रॉल बार वेब पेज पर हम जो देखने की उम्मीद कर सकते हैं उसके महान संकेतक हैं। यदि हम एक स्क्रॉल बार देखते हैं, तो हम उम्मीद करेंगे कि सामग्री को देखने के लिए नीचे स्क्रॉल करना आवश्यक होगा। जब आप स्क्रॉल बार नहीं देखते हैं, तो यह आमतौर पर दो कारणों में से एक होता है:

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

नोट साइड: क्षैतिज स्क्रॉल बार का उपयोग करना सुनिश्चित करें जब जानबूझकर आप उनका उपयोग करना चाहते हैं। यदि वे आपकी साइट पर अनजाने में दिखाई देते हैं, तो आमतौर पर ऐसा इसलिए होता है क्योंकि घटक आकार में कुछ गड़बड़ है। क्षैतिज स्क्रॉल बार को न छिपाएं लक्ष्य जब उन्हें उपस्थित नहीं होना चाहिए।

CSS कार्यान्वयन

इस कार्यान्वयन के बारे में ध्यान देने वाली पहली बात यह है कि सभी प्रमुख ब्राउज़र समान बनाए गए हैं। फ़ायरफ़ॉक्स के लिए जो काम करता है वह क्रोम के लिए काम नहीं करेगा या इंटरनेट एक्सप्लोरर और इसके विपरीत। कई ब्राउज़रों के लिए समर्थन प्रदान करने में हमारी सहायता करने के लिए सीएसएस उस चीज़ का उपयोग करता है जिसे हम प्रदाता उपसर्ग या ब्राउज़र उपसर्ग कहते हैं। हम उन्हें नीचे प्रस्तुत करते हैं:

< br>

चीट शीट आपूर्तिकर्ता उपसर्ग

<तालिका वर्ग = " wp -ब्लॉक टेबल "> विक्रेता उपसर्ग ब्राउज़र कवरिंग -webkit- क्रोम , सफारी, ओपेरा के नए संस्करण, और आईओएस के लिए फ़ायरफ़ॉक्स सहित अधिकांश आईओएस ब्राउज़र -moz - Firefox (गैर iOS) -o- ओपेरा के पुराने संस्करण -ms- इंटरनेट एक्सप्लोरर और एमएस एज

URL: क्रेडिट: MDN - CSS उपसर्ग

Alt Text: Mozilla Developer Network ने यह याद रखने के लिए एक आसान चीट शीट बनाई है कि किस उपसर्ग को उपयोग करें

कैप्शन: MDN ने यह याद रखने के लिए एक आसान चीट शीट बनाई है कि ब्राउज़र के लिए किस उपसर्ग का उपयोग करना है

प्रश्न तब बनता है कि कैसे क्या हम जानते हैं कि हमें उपसर्गों की आवश्यकता कब होती है और कब नहीं? CSS क्रिएटर्स हमेशा नई प्रॉपर्टी और काम करने के नए तरीकों के साथ प्रयोग करते रहते हैं - अगर एक पर्याप्त नई प्रॉपर्टी है, तो यह शायद अभी तक सभी ब्राउज़रों के साथ संगत नहीं है।

सौभाग्य से, ऐसे टूल हैं जो आपके CSS पर एक नज़र डालते हैं। और आपको आवश्यक उपसर्ग जोड़ें। आप इसे मैन्युअल रूप से भी कर सकते हैं और caneuse या दस्तावेज़ आपके लिए MDN ब्राउज़र संगतता निर्धारित करने में सहायता के लिए।

कोड दें

जब हम क्रोम में इस कोड को चलाते हैं तो यह एक ग्रे बैकग्राउंड डिव और कुछ टेक्स्ट तैयार करना चाहिए जो आप कर सकते हैं नीचे स्क्रोल करे। दो सबसे आम कार्यान्वयन शामिल हैं - फ़ायरफ़ॉक्स