Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS के साथ स्क्रॉल एंकरिंग को अक्षम करना

<घंटा/>

वेब ब्राउज़र द्वारा प्रदान की गई डिफ़ॉल्ट स्क्रॉल एंकरिंग को अक्षम करने के लिए, हम अतिप्रवाह एंकर . का उपयोग कर सकते हैं संपत्ति।

उदाहरण

निम्न उदाहरण अतिप्रवाह-एंकर संपत्ति का एक विचार देता है -

<!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=rb1.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=rb1.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=rb1.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=rb1.2.1&q=80&w=160" />
</div>
<h2>Test overflow</h2>
</body>
</html>

आउटपुट

यह निम्नलिखित परिणाम देगा -

CSS के साथ स्क्रॉल एंकरिंग को अक्षम करना


  1. CSS में स्क्रॉल पर फिक्स्ड हैडर के साथ HTML टेबल्स

    पोस्टियन:स्टिकी और टॉप:0 सेट करके, हम HTML टेबल में स्क्रॉल पर एक फिक्स्ड हेडर बना सकते हैं। उदाहरण निम्नलिखित उदाहरण हमें इस बात का अंदाजा देते हैं कि इसे कैसे लागू किया जाए - <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;

  1. CSS में ऑब्जेक्ट-फिट और ऑब्जेक्ट-पोजिशन के साथ क्रॉप इमेज

    CSS ऑब्जेक्ट-फिट और वस्तु-स्थिति संपत्ति हमें छवियों को क्रॉप करने और यह निर्दिष्ट करने में मदद करती है कि यह किसी तत्व में कैसे प्रदर्शित होता है। CSS ऑब्जेक्ट-फिट प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    object-fit: /*value*/    object-position:/*value*/ } उदाहरण नि

  1. CSS के साथ ऑन स्क्रॉल फिक्स्ड नेविगेशन बार कैसे बनाएं?

    CSS स्थिति विशेषता निर्दिष्ट करके, हम CSS का उपयोग करके एक निश्चित नेविगेशन बार बना सकते हैं। CSS में पोजिशन प्रॉपर्टी का सिंटैक्स इस प्रकार है - Selector {    position: /*value*/; } निम्नलिखित सीएसएस स्थिति संपत्ति का एक उदाहरण है। उदाहरण <!DOCTYPE html> <html> <head>