कैसे जरूरत नहीं है जब एक ऊर्ध्वाधर स्क्रॉल पट्टी छिपाने के लिए


95

मेरे पास एक टेक्सारिया है जो एक div में निहित है क्योंकि मेरे पास jquery संकेत है और सीमा को बदले बिना अपारदर्शिता का उपयोग करना चाहता था। एक दृश्य ऊर्ध्वाधर स्क्रॉल पट्टी है कि मैं केवल यह कैसे प्रदर्शित करना चाहता हूं जब मैं पाठ क्षेत्र में टाइप कर रहा हूं और यह कंटेनर से आगे निकल जाता है। मैंने अतिप्रवाह की कोशिश की है: ऑटो; लेकिन काम नहीं करता है।

पाठ का क्षेत्र:

<label>
    <div id="name">
        <textarea name="message" type="text" id="message"
            title="Enter Message Here"
            rows=9 cols=60 maxlength="2000"></textarea>
    </div>
</label>

शैलियाँ:

#name { 
    border: 1px solid #c810ca;
    width: 270px;
    height:159px;
    overflow: hidden; 
    position: relative;
    }

#message {
    height: 400px;
    width: 235px;
    overflow: hidden;
    position: absolute;
}

जवाबों:


199

overflow: auto(या overflow-y: auto) जाने का सही तरीका है।

समस्या यह है कि आपका पाठ क्षेत्र आपके div से लंबा है। डिव टेक्स्टबॉक्स को काटते हुए समाप्त होता है, इसलिए भले ही ऐसा लगता है कि इसे स्क्रॉल करना शुरू करना चाहिए जब टेक्स्ट लंबा होता है, तो यह स्क्रॉल करना शुरू 159pxनहीं करेगा जब तक कि टेक्स्ट टेक्स्ट 400pxबॉक्स की ऊंचाई से अधिक लंबा न हो जाए ।

इसे आज़माएं: http://jsfiddle.net/G9rfq/1/

मैंने ओवरफ्लो सेट किया: टेक्स्ट बॉक्स पर ऑटो, और टेक्स्टबॉक्स को div के समान आकार का बनाया।

इसके अलावा, मुझे विश्वास नहीं है कि यह किसी के divअंदर मान्य है label, ब्राउज़र इसे रेंडर करेगा, लेकिन यह कुछ फंकी सामान हो सकता है। इसके अलावा आपका divबंद नहीं है।


जब हम स्क्रॉलबार का उपयोग करके अनुकूलित कर चुके हैं, तो इस समाधान को कैसे काम करें -webkit- स्क्रॉलबार psuedo तत्व। ? क्योंकि अगर अतिप्रवाह ऑटो पीडीडो तत्वों को काम करने वाला है .... मैं अपने स्क्रॉलबार को छिपाने के साथ-साथ तब भी अनुकूलित करना चाहता हूं जब आवश्यकता नहीं है?
Kpatel1989

4

overflow: auto;या overflow: hidden;मुझे यह सोचना चाहिए।


जैसा कि मैंने अपने प्रश्न के अतिप्रवाह में कहा है: ऑटो; काम नहीं करता है :(
Lukus

छिपी हुई स्क्रॉल पट्टी को छुपाता है, लेकिन एक बार जब पाठ div को पार कर लेता है तो वह स्क्रॉल बार प्रदर्शित नहीं करता है, इसलिए बाकी टेक्स्ट को देखने के लिए नीचे स्क्रॉल नहीं कर सकता
Lukus

मैंने अभी इसका परीक्षण किया है और यह ठीक काम करता है। आप कौन सा ब्राउज़र उपयोग कर रहे हैं?
बोरिस बैकोवस्की

मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूँ, लेकिन IE में स्क्रॉल बार दिखाता है कोई बात नहीं अगर पाठ div और ऑटो के साथ एक बार यह DIV कंटेनर को स्क्रॉल बार पास नहीं दिखाता है
Lukus

जोड़ने का प्रयास करें position: relative;पर#name div
बोरिस Bachovski

2

इस वर्ग को .css वर्ग में जोड़ें

.scrol  { 
font: bold 14px Arial; 
border:1px solid black; 
width:100% ; 
color:#616D7E; 
height:20px; 
overflow:scroll; 
overflow-y:scroll;
overflow-x:hidden;
}

और div में वर्ग का उपयोग करें। जैसे यहाँ।

<div> <p class = "scrol" id = "title">-</p></div>

मेरे पास छवि जुड़ी हुई है, आप ऊपर दिए गए कोड का आउट पुट देखते हैं यहां छवि विवरण दर्ज करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.