ओवरक्रोल-व्यवहार - सीएसएस-ट्रिक्स

Anonim

overscroll-behaviorसीएसएस नियंत्रण में संपत्ति है कि क्या एक तत्व "स्क्रॉल श्रृंखलन" या नहीं का प्रयोग करेंगे। आपने संभवतः पहले इस व्यवहार का अनुभव किया है और शायद यह मान लिया है कि स्क्रॉलिंग इस तरह से वेब पर काम करती है! यदि आप किसी ऐसे तत्व के अंदर हैं, जिसकी खुद की स्क्रॉलिंग है (यह वर्टिकल है) और आपने इसे नीचे तक स्क्रॉल किया है, तो डिफ़ॉल्ट रूप से, अगला पैरेंट एलिमेंट अप (शायद पेज ही) उस दिशा में स्क्रॉल करना शुरू कर देता है। यदि आप उस डिफ़ॉल्ट को नहीं चाहते हैं, overscroll-behaviorतो वह उसे नियंत्रित करता है।

.stop-scroll-chaining ( overscroll-behavior: contain; /* or "none" */ )


CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा पेन ओवरक्रोल-व्यवहार देखें ।

संपत्ति कैस्केड (यानी, विरासत में मिली है), इसलिए यदि आपको ऐसा करने वाला कोई तत्व पसंद नहीं है, तो आप इसे कहीं भी होने से रोकने के लिए इसे शरीर पर लागू कर सकते हैं:

body ( overscroll-behavior: contain; /* or "none" */ )

noneमूल्य को रोकने के लिए माना जाता है ओवरस्क्रॉल affordance , जो मेरे सबसे अच्छे अनुमान का अर्थ है कि कि रबर बैंडिंग सामान कि कुछ ब्राउज़र करते हैं, विशेष रूप से टचपैड स्क्रॉल के साथ उपकरणों की तरह सामान।

डिफ़ॉल्ट मान है auto

साधन

  • CSS Overscroll व्यवहार मॉड्यूल स्तर 1
  • वेब प्लेटफॉर्म न्यूज़

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

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

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
६५ ५ ९ 1 1 । ९ नहीं न

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

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 नहीं न
    • पृष्ठभूमि-फ़िल्टर
    • बैकफेस-दृश्यता
    • पृष्ठभूमि
    • पृष्ठभूमि संलग्न
    • पृष्ठभूमि-मिश्रण-मोड
    • बैकग्राउंड-क्लिप
    • पृष्ठभूमि का रंग
    • पृष्ठभूमि छवि
    • पृष्ठभूमि मूल के
    • पृष्ठभूमि स्थिति
    • पृष्ठभूमि दोहराएँ
    • पृष्ठभूमि का आकार
    • ब्लीड
    • ब्लॉक-ओवरफ्लो
    • बॉर्डर
    • सीमा-सीमा
    • सीमा-पतन
    • सीमा-छवि
    • बॉर्डर-त्रिज्या
    • सीमा-रिक्ति
    • तल
    • बॉक्स-सजावट-ब्रेक
    • डब्बे की छाया
    • बॉक्स आकार
    • विराम
  • सी
    • कैप्शन-किनारा
    • कैरट
    • रंग-रोगन
    • ध्यान रखने योग्य
    • स्पष्ट
    • क्लिप-पथ
    • रंग
    • रंग-समायोजित
    • स्तंभ-गणना
    • कॉलम भरना
    • स्तंभ-अंतर
    • स्तंभ-नियम
    • स्तंभ-नियम-रंग
    • स्तंभ-नियम-शैली
    • स्तंभ-नियम-चौड़ाई
    • स्तंभ-काल
    • स्तंभ की चौड़ाई
    • कॉलम
    • शामिल
    • सामग्री
    • जवाबी कार्रवाई
    • काउंटर-रीसेट
    • काउंटर-सेट
    • कर्सर
    • दिशा
    • प्रदर्शन
    • रिक्त-कोशिकाएँ
  • एफ
    • भरण
    • फिल्टर
    • फ्लेक्स
    • फ्लेक्स-आधार
    • फ्लेक्स-दिशा
    • फ्लेक्स-फ्लो
    • फ्लेक्स-बढ़ना
    • फ्लेक्स-सिकुड़ना
    • फ्लेक्स-रैप
    • नाव
    • फ़ॉन्ट
    • फ़ॉन्ट-प्रदर्शन
    • फ़ॉन्ट परिवार
    • फ़ॉन्ट-सुविधा-सेटिंग्स
    • font-कर्निंग
    • फ़ॉन्ट-ऑप्टिकल-आकार
    • फ़ॉन्ट आकार
    • फ़ॉन्ट-आकार-समायोजित करें
    • फ़ॉन्ट-खिंचाव
    • फ़ॉन्ट शैली
    • फ़ॉन्ट-संश्लेषण
    • font-संस्करण
    • फ़ॉन्ट-संस्करण-संख्यात्मक
    • फ़ॉन्ट वजन
  • जी
    • अन्तर
    • ग्रिड-पंक्ति / ग्रिड-कॉलम
    • ग्रिड-टेम्पलेट-कॉलम / ग्रिड-टेम्पलेट-पंक्तियाँ
  • एच
    • फांसी-विराम चिह्न
    • ऊंचाई
    • हाइफ़न
  • मैं
    • छवि-प्रतिपादन
    • प्रारंभिक पत्र
    • इनलाइन आकार
    • इनसेट
    • इनसेट-ब्लॉक
    • इनसेट-ब्लॉक-एंड
    • इनसेट-ब्लॉक-स्टार्ट
    • इनसेट-इनलाइन
    • इनसेट-इनलाइन-एंड
    • इनसेट-इनलाइन-स्टार्ट
    • एकांत
  • जे
    • औचित्य-सामग्री
    • औचित्य-आइटम
  • एल
    • बाएं
    • पत्र अंतराल
    • रेखा अवरोध
    • लाइन-क्लैंप
    • ऊंची लाईन
    • सूची-शैली
    • हाशिया
    • मार्जिन-ब्लॉक
    • मार्जिन-ब्लॉक-एंड
    • मार्जिन-ब्लॉक-स्टार्ट
    • मार्जिन-इनलाइन
    • मार्जिन-इनलाइन-एंड
    • मार्जिन-इनलाइन-स्टार्ट
    • मास्क-क्लिप
    • मुखौटा-छवि
    • मुखौटा-विधा
    • मुखौटा-उत्पत्ति
    • मुखौटा-स्थिति
    • मुखौटा-दोहराना
    • मुखौटा आकार
    • अधिकतम ऊँचाई
    • अधिकतम इनलाइन आकार
    • अधिकतम चौड़ाई
    • मिनट-ऊंचाई
    • न्यूनतम-चौड़ाई
    • मिश्रण-मिश्रण-मोड
  • एन
  • हे
    • वस्तु-योग्य
    • वस्तु-स्थिति
    • ऑफसेट-लंगर
    • ऑफसेट-दूरी
    • समायोजन का रास्ता
    • ऑफसेट-घुमाएँ
    • अस्पष्टता
    • गण
    • अनाथों
    • रूपरेखा
    • रूपरेखा-ऑफसेट
    • बाढ़
    • अतिप्रवाह-लंगर
    • ओवरफ्लो-रैप
    • ओवरक्रोल-व्यवहार
  • पी
    • गद्दी
    • पृष्ठ ब्रेक
    • पेंट-ऑर्डर
    • परिप्रेक्ष्य
    • परिप्रेक्ष्य-उत्पत्ति
    • स्थान-आइटम
    • सूचक-घटनाएँ
    • पद
  • क्यू
    • उल्लेख। उद्धरण
  • आर
    • आकार
    • सही
    • पंक्ति-अंतराल
  • रों
    • स्क्रॉल-व्यवहार
    • स्क्रॉल-मार्जिन
    • स्क्रॉल-पैडिंग
    • स्क्रॉल-स्नैप-संरेखित करें
    • स्क्रॉल-स्नैप-स्टॉप
    • स्क्रॉल-स्नैप-प्रकार
    • स्क्रॉल पट्टी
    • स्क्रॉलबार-रंग
    • स्क्रॉलबार-नाली
    • स्क्रॉलबार-चौड़ाई
    • आकार-छवि-दहलीज
    • आकार-मार्जिन
    • आकार-बाहर
    • बोले
    • आघात
    • स्ट्रोक-दशहरा
    • स्ट्रोक-डैशऑफ़सेट
    • स्ट्रोक-लाइनकैप
    • स्ट्रोक-लाइनजॉइन
    • रेखा की चौड़ाई
  • टी
    • टैब आकार
    • टेबल लेआउट
    • पाठ संरेखित
    • पाठ-संरेखित-अंतिम
    • पाठ-गठबंधन-सीधा
    • text-decoration
    • पाठ-सजावट-रंग
    • पाठ-सजावट-रेखा
    • टेक्स्ट-डेकोरेशन-स्किप
    • टेक्स्ट-डेकोरेशन-स्किप-इंक
    • पाठ-सजावट-शैली
    • पाठ-सजावट-मोटाई
    • पाठ इंडेंट
    • पाठ-औचित्य
    • पाठ-अभिविन्यास
    • पाठ-अतिप्रवाह
    • पाठ प्रतिपादन
    • पाठ की छाया
    • पाठ-स्ट्रोक
    • पाठ बदलना
    • पाठ-रेखांकन-ऑफसेट
    • पाठ-रेखांकन-स्थिति
    • ऊपर / नीचे / बाएं / दाएं
    • स्पर्श कार्रवाई
    • परिवर्तन
    • बदलने मूल के
    • परिवर्तन-शैली
    • TRANSITION
    • संक्रमण-विलम्ब
    • अवस्थांतर अवधि
    • संक्रमण-संपत्ति
    • संक्रमण-समय-समारोह
  • यू
    • यूनिकोड-बीड़ी
    • यूनिकोड-श्रेणी
    • उपयोगकर्ता का चयन करें
  • वी
    • ऊर्ध्वाधर- align
    • दृश्यता
  • डब्ल्यू
    • सफेद-अंतरिक्ष
    • विधवाओं
    • चौड़ाई
    • बदल जाएगा
    • शब्द-विराम
    • शब्द-रिक्ति
    • लेखन-विधा
  • एक्स
  • जेड
    • Z- सूचकांक
    • ज़ूम
  • चयनकर्ताओं
      • ::पहले बादमे
      • : सक्रिय
      • : कोई भी लिंक
      • आसन्न सहोदर
      • (विशेषता)
      • : खाली
    • सी
      • : जाँच की
      • :वर्तमान
      • बच्चा
      • कक्षा
      • :चूक
      • : दिर ()
      • : विकलांग
      • वंशज
      • : खाली
      • : सक्षम किया गया
    • एफ
      • ::पहला अक्षर
      • ::पहली पंक्ति
      • :पहला बच्चा
      • : पहले प्रकार का
      • : ध्यान केंद्रित करें
      • : ध्यान केंद्रित
      • : फोकस-भीतर
      • : भविष्य
    • जी
      • सामान्य सहोदर
    • एच
      • : होवर
    • मैं
      • :रेंज में
      • : अनिश्चित
      • : अमान्य है
      • :है()
      • ईद
    • जे
    • एल
      • : लैंग ()
      • :आखरी बच्चा
      • : अंतिम प्रकार का
      • :संपर्क
      • :: मार्कर
      • : मैच ()
    • एन
      • :नहीं()
      • : nth-child
      • : nth-last-child
      • : nth-last-of-type
      • : nth-of-type
    • हे
      • :केवल बच्चे
      • : केवल-प्रकार का
      • : वैकल्पिक
      • :क्षेत्र के बहार
    • पी
      • :: प्लेसहोल्डर
      • : अतीत
      • : प्लेसहोल्डर-दिखाया गया है
    • क्यू
    • आर
      • : रीड-राइट /: रीड-ओनली
      • : आवश्यक है
      • : जड़
    • रों
      • :: चयन
    • टी
      • : निशाना लगाओ
      • प्रकार
    • यू
      • : उपयोगकर्ता-अमान्य
      • यूनिवर्सल
    • वी
      • : मान्य है
      • :का दौरा किया
    • डब्ल्यू
    • एक्स
    • जेड
  • हमारे लर्निंग पार्टनर फ्रंटेंड मास्टर्स

    फ्रंट-एंड डेवलपमेंट ट्रेनिंग की जरूरत है?

    फ्रंटेंड मास्टर्स इसे पाने के लिए सबसे अच्छी जगह है। उनके पास रिएक्ट से लेकर सीएसएस, वीयू से लेकर डी 3 तक, और नोड.जेएस और फुल स्टैक के अलावा सभी सबसे महत्वपूर्ण फ्रंट-एंड टेक्नोलॉजी पर पाठ्यक्रम हैं।