स्क्रॉलबार केवल तभी दिखते हैं जब एक div पर आच्छादित हो?

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि स्क्रोल करने योग्य div कैसे है जो केवल कवर किए जाने पर स्क्रॉलबार दिखाता है।

उदाहरण Google छवि खोज है, नीचे दी गई छवि में आप देख सकते हैं कि बाएं साइडबार स्क्रॉल-सक्षम क्यों नहीं दिखता है जब तक कि आप उस पर माउस नहीं ले जाते।

क्या यह सीएसएस के साथ संभव है या जावास्क्रिप्ट आवश्यक है? यदि संभव हो तो एक त्वरित उदाहरण ऐसा कार्य कैसे करें?

Answer 1

#div { overflow:hidden;height:whatever px; } 
#div:hover { overflow-y:scroll; } 

है कि काम की तरह

चाहेंगे कुछ?

Answer 2

मुझे लगता है कि जैसे

$("#leftDiv").mouseover(function(){$(this).css("overflow","scroll");}); 
$("#leftDiv").mouseout(function(){$(this).css("overflow","hidden");}); 

Answer 3

कुछ div एक निश्चित ऊंचाई srcoll दें: छिपा हुआ; और होवर पर स्क्रॉल को ऑटो में बदलें;

#test_scroll{ height:300px; overflow:hidden;} 
#test_scroll:hover{overflow-y:auto;} 

यहां एक उदाहरण है। http://jsfiddle.net/Lywpk/

Answer 4

आप दिखा/छिपने के बारे में केवल चिंता का विषय हैं, तो इस कोड को ठीक काम करेगा:,

$("#leftDiv").hover(function(){$(this).css("overflow","scroll");},function(){$(this).css("overflow","hidden");}); 

हालांकि यह मामले में आप चौड़ाई का उपयोग कर रहे हैं, अपने डिजाइन में कुछ तत्वों को संशोधित कर सकते हैं = 100%, इस बात पर विचार करते हुए कि जब आप स्क्रॉलबार को छुपाते हैं, तो यह आपकी चौड़ाई के लिए थोड़ा और अधिक कमरा बनाता है।

Answer 5

बदलते ओवरफ़्लो के साथ उत्तर में समस्या का एक गुच्छा है, जैसे आंतरिक ब्लॉक की असंगत चौड़ाई और रिफ्लो ट्रिगर करना। visibility संपत्ति और नेस्टेड ब्लॉकों का उपयोग: http://codepen.io/kizu/pen/OyzGXY

एक और:

.scrollbox { 
    width: 10em; 
    height: 10em; 
    overflow: auto; 
    visibility: hidden; 
} 
.scrollbox-content, 
.scrollbox:hover { 
    visibility: visible; 
} 

यहाँ एक काम कर उदाहरण के साथ एक कलम है

ही प्रभाव है कि पुनर्प्रवाहित कभी ट्रिगर नहीं करेंगे, के लिए एक आसान तरीका है इस विधि की विशेषता यह है कि visibility एनिमेटेबल है, इसलिए हम इसमें एक संक्रमण जोड़ सकते हैं (उपरोक्त पेन में दूसरा उदाहरण देखें)। एक संक्रमण जोड़ना यूएक्स के लिए बेहतर होगा: जब किसी अन्य तत्व के साथ चलते समय स्क्रॉलबार तुरंत दिखाई नहीं दे रहा है, और माउस कर्सर के साथ इसे लक्षित करते समय स्क्रॉलबार को याद करना मुश्किल होगा, क्योंकि यह तुरंत छुपा नहीं जाएगा कुंआ।

Answer 6

वेबकिट ब्राउज़र के लिए, इसके लिए एक चाल एक अदृश्य स्क्रॉलबार बनाना है, और फिर इसे होवर पर दिखाना है। यह विधि स्क्रॉलिंग क्षेत्र चौड़ाई को प्रभावित नहीं करती है क्योंकि स्क्रॉलबार के लिए आवश्यक स्थान पहले से मौजूद है।

कुछ इस तरह:

.scrolling-div { 
    &::-webkit-scrollbar { 
    background-color: transparent; 
    width: 10px; 
    } 
&::-webkit-scrollbar-thumb { 
    background-color: transparent; 
} 

}

.scrolling-div:hover { 
&::-webkit-scrollbar-thumb { 
    background-color: black; 
} 

}

codepen example