टीवी, फ़ोन, डेस्कटॉप वगैरह के लिए रिस्पॉन्सिव हॉरिज़ॉन्टल स्क्रोलव्यू बनाने के तरीके के बारे में बुनियादी जानकारी.
इस पोस्ट में, मुझे हॉरिज़ॉन्टल स्क्रोलिंग बनाने के तरीकों के बारे में जानकारी देनी है वेब के लिए ऐसे अनुभव जो मिनिमम, रिस्पॉन्सिव, ऐक्सेस किए जा सकने वाले, और काम करने वाले हों और प्लैटफ़ॉर्म (जैसे कि टीवी!) इसे आज़माएं डेमो के लिए उपलब्ध है.
अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:
खास जानकारी
हम एक हॉरिज़ॉन्टल स्क्रोल लेआउट बनाएंगे, जो इन वीडियो के थंबनेल होस्ट करेगा
मीडिया या प्रॉडक्ट. कॉम्पोनेंट, एक सादगी भरी <ul> सूची से शुरू होता है, लेकिन यह
सीएसएस की मदद से, स्क्रोल करना आसान और बेहतर हो गया है.
और उन्हें ग्रिड में स्नैप करना. सुविधाजनक बनाने के लिए JavaScript को जोड़ा गया है
रोविंग-इंडेक्स इंटरैक्शन से, कीबोर्ड के उपयोगकर्ताओं को 100 से ज़्यादा आइटम के एक हिस्से से दूसरे हिस्से पर जाने से रोकने में मदद मिलती है.
साथ ही, आज़माने के लिए बनाई गई एक मीडिया क्वेरी, prefers-reduced-data का इस्तेमाल
मीडिया स्क्रोलर, एक लाइटवेट टाइटल स्क्रोलर अनुभव के साथ आता है.
ऐक्सेस किए जा सकने वाले मार्कअप के साथ शुरू करें
मीडिया स्क्रोलर, कुछ मुख्य कॉम्पोनेंट से बना होता है. जैसे, आइटम की सूची. ऐप्लिकेशन सूची, अपने सरल रूप में, पूरी दुनिया की यात्रा कर सकती है और सभी लोग उसका इस्तेमाल कर सकते हैं. इस पेज पर आने वाला उपयोगकर्ता सूची ब्राउज़ कर सकता है और किसी लिंक पर क्लिक कर सकता है किसी आइटम को देखने के लिए. यह हमारे लिए ऐक्सेस किया जा सकने वाला बेस है.
<ul> एलिमेंट वाली सूची डिलीवर करें:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
<a> एलिमेंट का इस्तेमाल करके, सूची के आइटम को इंटरैक्टिव बनाएं:
<li>
<a href="#">
...
</a>
</li>
किसी इमेज और उसके कैप्शन को वाक्य की तरह दिखाने के लिए <figure> एलिमेंट का इस्तेमाल करें:
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
<img> में alt और loading एट्रिब्यूट पर ध्यान दें. मीडिया के लिए वैकल्पिक लेख
स्क्रोलर की मदद से, उपयोगकर्ता अनुभव एक बेहतर तरीका अपनाया जा सकता है. इससे थंबनेल के कॉन्टेंट को ज़्यादा बेहतर तरीके से समझा जा सकता है या
अगर इमेज लोड न हुई हो या यह उपयोगकर्ताओं को बोला गया यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराता हो, तो फ़ॉलबैक टेक्स्ट
कई बार काम करते हैं. फ़ाइव गोल्डन की मदद से ज़्यादा जानकारी पाएं
अनुपालन करने के लिए नियम
टेक्स्ट.
इस इमेज को सिग्नल देने के लिए, loading एट्रिब्यूट कीवर्ड lazy को स्वीकार करता है
सोर्स को सिर्फ़ तब फ़ेच किया जाना चाहिए, जब इमेज व्यूपोर्ट में हो. यह काम किया जा सकता है
यह बड़ी सूचियों के लिए वाकई अच्छा है, क्योंकि उपयोगकर्ता सिर्फ़ उन आइटम के लिए इमेज डाउनलोड करेंगे जिन्हें वे
स्क्रोल किया गया.
उपयोगकर्ता की कलर स्कीम की प्राथमिकता के हिसाब से काम करें
color-scheme का इस्तेमाल <meta> टैग के तौर पर करें, ताकि ब्राउज़र को यह पता चल सके कि आपका पेज
को हल्के और गहरे रंग वाली, दोनों तरह की उपयोगकर्ता-एजेंट स्टाइल चाहिए होती हैं. यह एक फ़्री डार्क मोड है
या लाइट मोड में दिखेगा, जो इस बात पर निर्भर करता है कि आप उसे कैसे देखते हैं:
<meta name="color-scheme" content="dark light">
मेटा टैग सबसे शुरुआती सिग्नल देता है, इसलिए ब्राउज़र अगर उपयोगकर्ता गहरे रंग वाली थीम चुनना चाहता है, तो गहरे रंग वाला डिफ़ॉल्ट कैनवस रंग चुना जा सकता है. इसका मतलब है कि साइट के पेजों के बीच नेविगेट करने पर सफ़ेद कैनवस फ़्लैश नहीं करेगा लोड होने के बीच में बैकग्राउंड. लोड होने के बीच में इस्तेमाल होने वाली गहरे रंग वाली थीम, स्क्रीन पर पहले से ज़्यादा शानदार दिखती है आँखों.
थॉमस स्टाइनर से यहां ज़्यादा जानें https://web.dev/color-scheme/.
कॉन्टेंट जोड़ें
ul > li > a > figure > picture > img की ऊपर दी गई सामग्री संरचना को देखते हुए,
अगला टास्क है, स्क्रोल करने के लिए इमेज और टाइटल जोड़ना. मैंने डेमो पैक कर दिया है
स्टैटिक प्लेसहोल्डर इमेज और टेक्स्ट का इस्तेमाल करें, लेकिन आप चाहें, तो अपने
पसंदीदा डेटा सोर्स को चुनें.
सीएसएस की मदद से स्टाइल जोड़ें
अब समय आ गया है कि सीएसएस, कॉन्टेंट की इस सामान्य सूची को अनुभव. Netflix, App Store, और कई अन्य साइटों और ऐप्लिकेशन पर हॉरिज़ॉन्टल फ़ॉर्मैट का इस्तेमाल किया जाता है व्यूपोर्ट को कैटगरी और विकल्पों के साथ पैक करने के लिए, स्क्रोलिंग एरिया.
स्क्रोलर लेआउट बनाना
यह ज़रूरी है कि लेआउट में दिखने वाले वीडियो न दिखें या टेक्स्ट पर ज़्यादा फ़ोकस न करें काट-छांट के साथ एलिप्सिस. कई टेलीविज़न सेट में मीडिया स्क्रोलर होते हैं, जो यह वाला, लेकिन सभी अक्सर दीर्घवृत्त वाली सामग्री का सहारा लेते हैं. इस लेआउट में काम नहीं करता! इससे 1 लेआउट बनाते हुए, मीडिया कॉन्टेंट भी कॉलम के साइज़ को बदल सकता है फ़्लेक्सिबल बन जाए, जो कई दिलचस्प कॉम्बिनेशन को हैंडल कर सके.
कंटेनर, कॉलम के साइज़ को बदलने के लिए, डिफ़ॉल्ट साइज़ को कस्टम प्रॉपर्टी. इस ग्रिड लेआउट में कॉलम के साइज़ को लेकर राय दी गई है. यह केवल दूरी और दिशा प्रबंधित करें:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
इसके बाद, <picture> एलिमेंट इस कस्टम प्रॉपर्टी का इस्तेमाल करके, हमारा बेस आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाता है: बॉक्स:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
कुछ और छोटी स्टाइल का इस्तेमाल करके, मीडिया स्क्रोलर के सामान्य हिस्सों को पूरा करें:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
overflow को सेट करने पर, <ul> को स्क्रोल किया जा सकता है और कीबोर्ड नेविगेशन की अनुमति दी जा सकती है
तो हर डायरेक्ट चाइल्ड <li> एलिमेंट का ::marker हटा दिया जाता है.
inline-block का नया डिसप्ले टाइप पाएं.
हालांकि, इमेज अब भी रिस्पॉन्सिव नहीं हैं और अचानक दिख रही हैं वे वीडियो में मौजूद हैं. कुछ साइज़, फ़िट, और बॉर्डर स्टाइल की मदद से उन्हें ट्रेनिंग दें लेज़ी लोडिंग के दौरान दिखने वाला बैकग्राउंड ग्रेडिएंट:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
स्क्रोल पैडिंग
पेज के कॉन्टेंट के साथ अलाइनमेंट, और किनारे से किनारे तक स्क्रोल होने वाले सरफ़ेस एरिया के अलाइनमेंट को ऐसे एलिमेंट का भी इस्तेमाल करें.
हमारी टाइपोग्राफ़ी के हिसाब से, किनारे से किनारे तक स्क्रोल करने वाले लेआउट को पूरा करने के लिए
और लेआउट लाइन के लिए, scroll-padding से मेल खाने वाले padding का इस्तेमाल करें:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
हॉरिज़ॉन्टल स्क्रोलिंग पैडिंग की गड़बड़ी ठीक की गई ऊपर दिया गया है कि इस प्रोसेस को पूरा करना कितना आसान होना चाहिए स्क्रोल कंटेनर को पैड करें, लेकिन इसके साथ काम करने से जुड़ी कुछ समस्याएं हैं (हालांकि, Chromium 91 और उसके बाद के वर्शन में इसे ठीक किया गया!). यहां जाएं: थोड़ी देर के लिए यहां जाएं अपडेट कर दी है, लेकिन कम शब्दों में यह कहा जाता है कि पैडिंग (जगह) को हमेशा ध्यान में नहीं रखा जाता था देखने के लिए क्लिक करें.
ब्राउज़र को ट्रिकर के आखिर में पैडिंग (जगह) लगाने के लिए, प्रत्येक सूची के अंतिम चित्र को लक्षित करें और एक छद्म तत्व जोड़ें जो ज़रूरत के हिसाब से पैडिंग (जगह) की जानकारी दें.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
लॉजिकल प्रॉपर्टी का इस्तेमाल करने से, मीडिया स्क्रोलर किसी भी राइटिंग मोड में काम कर सकता है और दस्तावेज़ की दिशा तय करता है.
स्क्रोल स्नैप करना
ओवरफ़्लो वाला स्क्रोलिंग कंटेनर, सीएसएस की एक लाइन के साथ स्नैपिंग व्यूपोर्ट बन सकता है. इसके बाद, यह बच्चों पर निर्भर करता है कि वे उस व्यूपोर्ट के साथ कैसे अलाइन होना चाहते हैं.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
फ़ोकस
यह कॉम्पोनेंट टीवी पर काफ़ी लोकप्रिय हुआ, ऐप्लिकेशन स्टोर वगैरह में उपलब्ध है. कई वीडियो गेम प्लैटफ़ॉर्म, मीडिया स्क्रोलर का इस्तेमाल मिलती-जुलती है, जो उनके मुख्य होम स्क्रीन लेआउट के तौर पर है. फ़ोकस एक बड़ा UX है बस एक छोटा सा योगदान नहीं. कल्पना करें कि इस मीडिया स्क्रोलर का इस्तेमाल किया जा रहा है तो रिमोट की मदद से अपने सोफ़े के साथ साउंड इफ़ेक्ट का इस्तेमाल करके, इस इंटरैक्शन को कुछ आसान बना सकते हैं:
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
यह फ़ोकस आउटलाइन स्टाइल को बॉक्स से 7px दूर सेट कर देता है, जिससे यह अच्छी तरह से काम करती है
स्पेस. अगर उपयोगकर्ता ने मोशन को कम करने के लिए कोई मोशन पसंद नहीं किया है, तो ऑफ़सेट
फ़ोकस इवेंट को हल्के से मोशन देते हुए, ट्रांज़िशन किया गया.
रोविंग इंडेक्स
गेमपैड और कीबोर्ड इस्तेमाल करने वालों को खास ध्यान देने की ज़रूरत है. ये खास बातें कॉन्टेंट और विकल्पों को स्क्रोल करने की सुविधा मिलती है. इसे हल करने के सामान्य पैटर्न को यह कहा जाता है रोविंग इंडेक्स तक पहुंच सकते हैं. ऐसा तब होता है, जब आइटम के कंटेनर को कीबोर्ड पर फ़ोकस किया गया है, लेकिन सिर्फ़ 1 बच्चे को फ़ोकस बनाए रखने की अनुमति है एक समय में. एक समय में इस्तेमाल किए जा सकने वाले इस आइटम को इस तरह से डिज़ाइन किया गया है कि उपयोगकर्ता टैब 50+ दबाने के बजाय, आइटम की संभावित रूप से लंबी सूची को छोड़कर समय तय करें.
डेमो के पहले स्क्रोलर में 300 आइटम हैं. हम इसे बनाने से बेहतर कर सकते हैं अगले सेक्शन में पहुंचने के लिए उन सभी को पार कर जाते हैं.
इस अनुभव को बनाने के लिए, JavaScript को कीबोर्ड इवेंट और फ़ोकस को ध्यान में रखना होगा इवेंट. मैंने एक छोटी ओपन सोर्स लाइब्रेरी npm ताकि इस उपयोगकर्ता को बनाने में सहायता मिल सके लक्ष्य को आसानी से हासिल किया जा सकता है. तीन स्क्रोलर के लिए, इसे इस्तेमाल करने का तरीका यहां बताया गया है:
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
यह डेमो, स्क्रोलर के लिए दस्तावेज़ की क्वेरी करता है और उनमें से हर एक के लिए,
rovingIndex() फ़ंक्शन का इस्तेमाल करना होगा. रोविंग पाने के लिए, rovingIndex() एलिमेंट को पास करें
अनुभव, जैसे कि सूची कंटेनर और टारगेट क्वेरी सिलेक्टर, जैसे कि
फ़ोकस टारगेट, डायरेक्ट डिसेंडेंट नहीं हैं.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
इस इफ़ेक्ट के बारे में ज़्यादा जानने के लिए, ओपन सोर्स लाइब्रेरी देखें roving-ux पर टैप करें.
आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात)
इस पोस्ट को लिखने के बाद,
aspect-ratio
फ़्लैग का इस्तेमाल कर सकते हैं, लेकिन यह Chromium ब्राउज़र या सेट टॉप बॉक्स में उपलब्ध है. क्योंकि
मीडिया स्क्रोलर ग्रिड लेआउट, सिर्फ़ दिशा और स्पेसिंग को दिखाता है.
मीडिया क्वेरी में बदलाव होता है, जो आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के सपोर्ट की जांच करता है.
कुछ और डाइनैमिक मीडिया स्क्रोलर में, प्रोग्रेस के हिसाब से सुधार करने की सुविधा.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
अगर ब्राउज़र पर aspect-ratio सिंटैक्स काम करता है, तो मीडिया स्क्रोलर की तस्वीरें
aspect-ratio के साइज़ में अपग्रेड किया गया. ड्राफ़्ट नेस्टिंग सिंटैक्स का इस्तेमाल करके, हर तस्वीर
यह पहली, दूसरी या तीसरी लाइन के आधार पर अपना आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बदलता है. कॉन्टेंट बनाने
नेस्ट सिंटैक्स से कुछ छोटे
किसी दूसरे साइज़ के लॉजिक के साथ-साथ व्यूपोर्ट में बदलाव भी किया जा सकता है.
इस सीएसएस से, यह सुविधा ज़्यादा ब्राउज़र इंजन पर उपलब्ध होने के साथ-साथ, मैनेज करते हैं, लेकिन दिखने में शानदार लेआउट देते हैं.
कम किए गए डेटा को प्राथमिकता देता है
हालांकि, यह नई तकनीक सिर्फ़ उपलब्ध है
झंडे के पीछे लिखा होता है
कैनरी,
मुझे इस बारे में बताना था कि पेज लोड होने में लगने वाले समय में से किस तरह से बचा जा सकता है और
डेटा के इस्तेमाल को आसान बनाता है. इसकी prefers-reduced-data मीडिया क्वेरी:
लेवल 5 पर यह पूछा जा सकता है कि डिवाइस,
किसी भी तरह के डेटा की स्थिति को कम कर सकता है, जैसे कि डेटा बचाने की सेटिंग मोड. अगर ऐसा है, तो मैं
दस्तावेज़ में सेव कर सकते हैं और इस मामले में इमेज को छिपा सकते हैं.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
सामग्री अब भी नेविगेट की जा सकती है, लेकिन भारी इमेज की लागत के बिना
डाउनलोड किया गया. prefers-reduced-data सीएसएस जोड़ने से पहले की साइट, यह रही:
(7 अनुरोध, 131 मि॰से॰ में 100 केबी संसाधन)
prefers-reduced-data सीएसएस जोड़ने के बाद, साइट की परफ़ॉर्मेंस यहां दी गई है:
(71 अनुरोध, 1.07 सेकंड में 1.2 एमबी संसाधन)
64 कम अनुरोध, जो व्यूपोर्ट में ~60 इमेज होंगे (जांच की गईं (जैसे, चौड़ी स्क्रीन वाले डिसप्ले पर) 10% डेटा तार के ऊपर मौजूद है. काफ़ी असरदार सीएसएस.
नतीजा
अब जब आपको पता है कि मैंने इसे कैसे किया, तो कैसे करेंगे?! 🙂
आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं. एक कोडपेन बनाएं या अपना डेमो होस्ट करें, मुझे इसके साथ ट्वीट करें, और मैं इसे कम्यूनिटी रीमिक्स वाला सेक्शन नीचे दिया गया है.
सोर्स
कम्यूनिटी रीमिक्स
फ़िलहाल, यहां कोई कॉन्टेंट मौजूद नहीं है!