मैंने इसे कुछ साइटों में देखा है, उदाहरण artofadambetts.com है। पृष्ठ पर स्क्रॉल बार केवल पृष्ठ का एक तत्व स्क्रॉल करता है, न कि पूरे पृष्ठ पर। मैंने स्रोत को देखा और अभी तक इसे समझने में सक्षम नहीं है। यह कैसे किया जाता है?किसी पृष्ठ के भाग को स्क्रॉल करने के लिए ब्राउज़र स्क्रॉलबार कैसे सेट अप करें?
यह सुंदर गंधा है साथ
<div class="highz"> //Put random stuff here. it'll be fixed </div> <div class="lowz"> Put stuff here you want to scroll and position it.</div>
:
उदाहरण के लिए। वह अधिकांश divs पर "स्थिति: निश्चित" का उपयोग करता है, और जो स्क्रॉल करता है वह वह है जो उसके पास नहीं है।
इस तरह के एक div के रूप में एक तत्व पर स्क्रॉल बार चुनने के लिए:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
आप केवल एक क्षैतिज या लम्बवत स्क्रॉल पट्टी चाहते हैं, केवल का उपयोग की ओवरफ़्लो- एक्स और अतिप्रवाह-y जो भी आप की जरूरत है।
एक div के लिए, आप, सीएसएस
overflow: auto
उदाहरण के लिए में जोड़ सकते हैं
<div style="overflow:auto; height: 500px">Some really long text</div>
संपादित करें: साइट पर आप पोस्ट को देखने के बाद, तो आप शायद नहीं इस चाहते हैं। वह अपनी वेबसाइट में जो करता है वह लेआउट को निश्चित (स्थिति: निश्चित) के रूप में लेता है और इसे टेक्स्ट की तुलना में उच्च जेड-इंडेक्स असाइन करता है, जो कम जेड-इंडेक्स है। सीएसएस फ़ाइल
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
यह "स्थिति: पूर्ण;" का उपयोग कर सीएसएस में किया जा सकता है।
ब्राउज़र है पृष्ठ स्क्रॉल, अपने बस का वह हिस्सा स्थिति में तय हो गई है: खंड
यहाँ एक उदाहरण टेम्पलेट है।
यह उस भाग पर "स्थिति: निश्चित" सीएसएस संपत्ति का उपयोग करके किया जाता है जिसे आप स्क्रॉल नहीं करना चाहते हैं।
उन्होंने सीएसएस के माध्यम से निश्चित स्थिति रखने के लिए पक्ष और शीर्ष तत्व सेट किए हैं (उनकी style.css फ़ाइल के लाइन 94 देखें)। यह उन्हें स्क्रॉल में रखते हुए व्यूपोर्ट में रखता है।
असल में यह स्क्रॉलिंग हिस्सा नहीं है जो "नौकरी कर रहा है", यह पृष्ठ का निश्चित हिस्सा है।
ऐसा करने में, आप सीएसएस का उपयोग करें और position: fixed; संपत्ति जोड़ना चाहिए तत्वों है कि आप स्क्रॉल करने के लिए नहीं चाहते हैं (top, bottom, left और/या right गुणों के साथ इसका इस्तेमाल)।
और आपको उन्हें अधिक z-index देना नहीं भूलना चाहिए, अगर आपके पास स्क्रॉलिंग तत्व नहीं हो सकता है जो आपके निश्चित तत्व पर जा सकता है जैसे आप स्क्रॉल करते हैं (और आप निश्चित रूप से यह नहीं चाहते हैं)।
संख्या जानने के लिए लोगों सीएसएस में चीजों के इन प्रकार के कर और/या Javascript उपकरण Firebug बस बकाया है:
यह ध्यान देने योग्य है कि further hacks स्थिति तय IE6 के लिए काम नहीं करता है बिना , जो अभी भी आपकी साइट के आधार पर बाजार के 15-30% तक पहुंचने का प्रबंधन कर रहा है।
आप पेज पर निश्चित स्थिति में विभिन्न तत्वों को जोड़ने के लिए निश्चित स्थिति या पूर्ण स्थिति का उपयोग कर सकते हैं। वैकल्पिक रूप से आप उस पर स्क्रॉलबार को मजबूर करने के लिए एक निश्चित आकार तत्व (जैसे एक डीआईवी) निर्दिष्ट कर सकते हैं और overflow: scroll का उपयोग कर सकते हैं।
जैसा कि पहले ही उल्लेख किया गया है, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स/ओपेरा/सफारी में काम करने के लिए सबकुछ प्राप्त करने के लिए हैक्स का न्यायसंगत उपयोग की आवश्यकता है।
वेब पेज के किसी विशेष भाग स्क्रॉल के लिए यह प्रयास ......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>
अच्छा बिंदु। साइट आईई 6 में काम नहीं करती है। – airportyh