स्क्रॉल-मार्जिन - सीएसएस-ट्रिक्स

Anonim

scroll-marginCSS स्क्रॉल स्नैप मॉड्यूल का हिस्सा है। स्क्रॉल स्नपिंग का तात्पर्य विंडो पर (या स्क्रॉल करने योग्य कंटेनर) पृष्ठ पर विशिष्ट तत्वों के लिए व्यूपोर्ट की स्थिति को "लॉक करना" है। स्क्रॉल-स्नपिंग कंटेनर के बारे में सोचें जैसे कि किसी तत्व के ऊपर एक चुंबक लगाना जो व्यूपोर्ट के शीर्ष पर चिपक जाता है और पेज को वहीं स्क्रॉल करने से रोकने के लिए मजबूर करता है।

scroll-marginस्क्रॉल-स्नपिंग कंटेनर के भीतर स्क्रॉल-स्नैपिंग तत्व के लिए एक वैकल्पिक संपत्ति है। स्क्रॉल-स्नपिंग कंटेनरों के बारे में अधिक जानकारी के लिए scroll-snap-typeपंचांग प्रविष्टि देखें ।

स्क्रॉल-मार्जिन दर्ज करें

scroll-marginएक तत्व के स्नैप क्षेत्र को समायोजित करने के लिए उपयोग किया जाता है (वह बॉक्स जो यह परिभाषित करता है कि तत्व को कहाँ तड़क दिया जाएगा)। जोड़ना scroll-marginउपयोगी होता है जब आपको जगह में तड़कने पर कंटेनर के किनारे से एक तत्व स्थान देने की आवश्यकता होती है, लेकिन उन स्थितियों की अनुमति देता है जहां प्रत्येक तत्व को थोड़ा अलग अंतर की आवश्यकता हो सकती है। यदि सभी तत्वों में समान रिक्ति आवश्यकताएं हैं, तो scroll-paddingइसके बजाय मूल कंटेनर पर उपयोग करने पर विचार करें scroll-marginक्योंकि यह कंटेनर के भीतर सभी तत्वों के लिए रिक्ति को प्रभावित करता है।

एक सरल उदाहरण जहां scroll-marginएक तत्व के शीर्ष और बाईं ओर 50px रिक्ति की अनुमति देता है, ऐसा दिखता है:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
गुलाबी scroll-marginतत्व इस तत्व का प्रतिनिधित्व करता है ।

वाक्य - विन्यास

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

लॉन्गहैंड पर महत्वपूर्ण नोट: क्रोम (और संभवतः अन्य ब्राउज़र) वर्तमान में लॉन्गहैंड-प्रारूप scroll-paddingऔर scroll-marginगुणों का समर्थन नहीं करते हैं। अधिकतम ब्राउज़र समर्थन के लिए आशुलिपि का उपयोग करें। अधिक विवरण और वर्तमान स्थिति के लिए क्रोमियम बग ट्रैकर पर इस मुद्दे को देखें।

मूल्यों

scroll-marginस्वीकार करता है निम्नलिखित लंबाई मूल्य है, जो के लिए इसी तरह लिखा है marginऔर अन्य गुण जहां मूल्य इकाइयों (के साथ परिभाषित किया जा सकता px, em, vh, आदि)। अधिक जानकारी के लिए W3C मान और इकाइयाँ मॉड्यूल देखें। प्रतिशत का उपयोग scroll-marginयुक्ति के अनुसार नहीं किया जा सकता है ।

उदाहरण


CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉल-पेडिंग उदाहरण देखें ।

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
69. है ६ 68 1 1* । ९ 1 1

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 11.0-11.2

सम्बंधित

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

साधन

  • सीएसएस स्क्रॉल स्नैप डब्ल्यू 3 सी उम्मीदवार की सिफारिश
  • प्रैक्टिकल सीएसएस स्क्रॉल तड़क
  • पेश है CSS स्क्रॉल स्नैप पॉइंट