परिचय
ब्राउज़र्स द्वारा प्रदान किए जाने वाले डिफ़ॉल्ट स्क्रॉल एंकरिंग व्यवहार को अक्षम करने के लिए, हम overflow-anchor प्रॉपर्टी का उपयोग कर सकते हैं। स्क्रॉल एंकरिंग स्वचालित रूप से स्क्रॉल स्थिति को समायोजित करता है जब ऊपर कंटेंट लोड होता है, जिससे उपयोगकर्ता की पढ़ने की स्थिति बनी रहती है।
उदाहरण: स्क्रॉल एंकरिंग अक्षम करना
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow-anchor: none;
}
div {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1613061588991-6dd130548bc7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612129717112-9d1274034547?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1613079936591-8ce270890241?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=160" />
<img src="https://images.unsplash.com/photo-1612454902143-328050834c9e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb-1.2.1&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>
ओवरफ्लो-एंकर मान
| मान | विवरण |
|---|---|
auto |
डिफ़ॉल्ट। ब्राउज़र स्क्रॉल एंकरिंग लागू करता है |
none |
स्क्रॉल एंकरिंग अक्षम करता है |
कब उपयोग करें
- कैरोसल/स्लाइडर: जब प्रोग्रामेटिक रूप से स्क्रॉल स्थिति नियंत्रित करना हो
- इन्फिनिट स्क्रॉल: जब नया कंटेंट ऊपर प्रीपेंड किया जाता है (नीचे नहीं)
- एनिमेटेड लेआउट: जब लेआउट शिफ्ट्स जानबूझकर और नियंत्रित होते हैं
- गेम/कैनवास ऐप्स: जहां स्क्रॉल व्यवहार पूरी तरह से कस्टम होता है
ब्राउज़र सपोर्ट
Chrome 56+, Firefox 66+, Edge 79+, Safari 13+ में सपोर्टेड। IE में सपोर्ट नहीं है।
नोट
अधिकांश मामलों में, डिफ़ॉल्ट auto व्यवहार उपयोगकर्ता अनुभव के लिए बेहतर होता है। केवल तभी अक्षम करें जब आपके पास विशिष्ट कारण हो और आप मैन्युअल रूप से स्क्रॉल स्थिति प्रबंधित कर रहे हों।
