स्क्रॉलबार और उपयोगकर्ता अनुभव
उपयोगकर्ता अब वेबसाइटों को नेविगेट करते समय एक निश्चित अनुभव के आदी हो गए हैं। उदाहरण के लिए, आप किसी साइट के ऊपरी बाएँ कोने में किसी व्यवसाय के लोगो से आपको मुखपृष्ठ पर ले जाने की अपेक्षा करेंगे। लेकिन क्या होगा अगर ऐसा नहीं है? क्या होगा यदि उस साइट पर सब कुछ विपरीत . किया गया हो आपने सोचा था कि यह क्या करेगा?
ज़रा सोचिए कि अगर कोई स्क्रॉलबार मौजूद होता, लेकिन जैसे ही आपने अपने माउस पर अपना स्क्रॉल बटन घुमाया या आपने अपनी उंगलियों को अपने डिवाइस के ट्रैकपैड पर खींचा, कुछ नहीं हुआ . इसे एक भयानक उपयोगकर्ता अनुभव . माना जाएगा .
एक अच्छा उपयोगकर्ता अनुभव जो बनाता है या तोड़ता है वह अपने आप में एक पोस्ट हो सकता है, लेकिन इसका एक हिस्सा निश्चित रूप से ठीक से काम करने वाले स्क्रॉलबार और सौंदर्यशास्त्र के लिए उन्हें छिपाने की क्षमता है।
स्क्रॉलबार इस बात के बहुत अच्छे संकेतक हैं कि हम वेबपेज पर क्या देखने की उम्मीद कर सकते हैं। यदि हम एक स्क्रॉलबार देखते हैं, तो हम सामग्री देखने के लिए नीचे स्क्रॉल करने की आवश्यकता की अपेक्षा करते हैं। जब हम स्क्रॉलबार नहीं देखते हैं, तो आमतौर पर यह दो कारणों में से एक होता है:
- आप जो देखते हैं वही आपको मिलता है - आपके व्यूपोर्ट (आपकी स्क्रीन) की ऊंचाई और चौड़ाई साइट की ऊंचाई और चौड़ाई से मेल खाती है।
- साइट के डिज़ाइन में किसी प्रकार का एनिमेटेड तीर या विशेषता शामिल है जो इंगित करता है कि स्क्रॉलिंग के माध्यम से अधिक सामग्री उपलब्ध है। जब हम स्क्रॉल करना शुरू करेंगे तभी स्क्रॉल बार दिखाई देगा। तब तक छिपा रहना डिफ़ॉल्ट है।
डेवलपर्स के रूप में, अच्छे स्क्रॉलबार उपयोग को लागू करने से साइट के उपयोगकर्ता अनुभव में सुधार होगा, जो बदले में ग्राहकों को साइट पर रखेगा।
साइड नोट: जब आप जानबूझकर . क्षैतिज स्क्रॉल बार का उपयोग करना सुनिश्चित करें उनका उपयोग करना चाहते हैं। यदि वे आपकी साइट पर अनजाने में दिखाई देते हैं, तो आमतौर पर ऐसा इसलिए होता है क्योंकि आपके घटकों के आकार के साथ कुछ गड़बड़ है। क्षैतिज स्क्रॉलबार को उद्देश्य पर न छिपाएं जब वे वहां नहीं होने चाहिए।
सीएसएस कार्यान्वयन
इस कार्यान्वयन के बारे में ध्यान देने वाली पहली बात यह है कि सभी प्रमुख ब्राउज़र समान नहीं बनाए गए हैं। फ़ायरफ़ॉक्स के लिए जो काम करता है वह क्रोम या इंटरनेट एक्सप्लोरर के लिए काम नहीं करेगा और इसके विपरीत। CSS का प्रयोग करता है जिसे हम विक्रेता उपसर्ग . कहते हैं या ब्राउज़र उपसर्ग क्रॉस-ब्राउज़र सहायता प्रदान करने में हमारी सहायता करने के लिए। हम उन्हें नीचे सूचीबद्ध करते हैं:
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
विक्रेता उपसर्ग धोखा पत्र
| विक्रेता उपसर्ग | इसके द्वारा कवर किए जाने वाले ब्राउज़र |
| -वेबकिट- | Chrome, Safari, Opera के नए संस्करण और iOS के लिए Firefox सहित अधिकांश iOS ब्राउज़र, |
| -मोज़- | फ़ायरफ़ॉक्स (iOS नहीं) |
| -o- | ओपेरा के पुराने संस्करण |
| -ms- | इंटरनेट एक्सप्लोरर और एमएस एज |
यूआरएल: श्रेय:MDN - CSS उपसर्ग
Alt Text:Mozilla Developer Network ने यह याद रखने के लिए एक आसान चीट शीट बनाई है कि किस उपसर्ग का उपयोग करना है
कैप्शन: MDN ने यह याद रखने के लिए एक आसान चीट शीट बनाई है कि किस ब्राउज़र के लिए कौन सा उपसर्ग उपयोग करना है
प्रश्न तब बनता है, हमें कैसे पता चलेगा कि हमें उपसर्गों की आवश्यकता कब है और कब नहीं? जो लोग CSS बनाते हैं वे हमेशा नए गुणों और चीजों को करने के नए तरीकों के साथ प्रयोग करते हैं - यदि कोई ऐसी संपत्ति है जो काफी नई है, तो संभावना है कि यह अभी तक सभी ब्राउज़रों में संगत नहीं है।
शुक्र है, ऐसे उपकरण उपलब्ध हैं जो आपके सीएसएस पर एक नज़र डालेंगे और आपके लिए आवश्यक उपसर्ग जोड़ देंगे। आप इसे मैन्युअल रूप से भी कर सकते हैं और ब्राउज़र संगतता निर्धारित करने में आपकी सहायता के लिए कैनियस या एमडीएन दस्तावेज़ जैसी साइट का उपयोग कर सकते हैं।
आइए कोड!
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
जब हम इस कोड को क्रोम में चलाते हैं, तो इसे एक ग्रे डिव बैकग्राउंड और कुछ टेक्स्ट तैयार करना चाहिए जिसे आप स्क्रॉल कर सकते हैं। दो सबसे आम कार्यान्वयन शामिल हैं - फ़ायरफ़ॉक्स <style> . में कोड के शीर्ष की ओर है उपनाम। बाकी सब कुछ –webkit उपसर्ग संपत्ति में है।
आप अपने कार्यान्वयन में जो देखेंगे वह यह है कि कोई स्क्रॉल बार नहीं है, लेकिन इसमें अभी भी स्क्रॉल बार की कार्यक्षमता है। सीएसएस में अपनी स्क्रॉलबार को छिपाने के लिए यह कई तरीकों में से एक है। आपके लिए और क्या काम किया है? मैं आपको चुनौती देता हूं कि आप यह देखने के लिए अपने कोड के साथ खेलें कि क्या आप कोई अलग तरीका ढूंढ सकते हैं।