दिखा स्क्रॉलबार केवल जब माउसओवर div

24

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

div.myautoscroll { 
     height: 40ex; 
     width: 40em; 
     overflow: hidden; 
     border: 1px solid #444; 
     margin: 3em; 
    } 
    div.myautoscroll:hover { 
     overflow: auto; 
    } 
    div.myautoscroll p { 
     padding-right: 16px; 
    } 
    div.myautoscroll:hover p { 
     padding-right: 0px; 
    }

this fiddle पर कार्य करते हुए देखें - आप सही पक्ष "परिणाम" खिड़की को चौड़ा करने के लिए पूरे बॉक्स देखते हैं, या सीएसएस में चौड़ाई को कम करना चाहते हैं।

संपादित 2014-10-23

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

कुछ सिस्टम, जैसे कि मैक ओएस एक्स (कम से कम 10.8.x) के नए संस्करण, स्क्रॉलबार नहीं दिखाते हैं जब तक आप स्क्रॉल करना प्रारंभ नहीं करते हैं जो इस पूरी तकनीक को बंद कर सकता है। यदि स्क्रॉलबार नहीं दिखाता है कि होवर तक इसे छिपाने का कोई कारण नहीं हो सकता है, या आप auto या यहां तक कि scroll के रूप में इसे ओवरग्लो छोड़ना चाहते हैं।

स्रोत

2012-04-04 16:59:47

+0

समाधान के लिए धन्यवाद। मुझे अपनी नौकरी के लिए इसकी ज़रूरत थी। लेकिन मेरे पास एक छोटा मुद्दा है। 16px पैडिंग-दाएं जो आपने उपयोग किया है जब कोई स्क्रॉलबार दिखाई नहीं देता है और स्क्रॉलबार दिखाई देने पर होवर पर 0 हो जाता है। मैं किसी कारण से 16 पीएक्स पैडिंग का उपयोग नहीं करना चाहता, इसलिए मैंने इसे हटा दिया। पहली बार यह ठीक काम करता है, div पर होवरिंग स्क्रॉलबार लाता है, बाहर निकलता है इसे हटा देता है लेकिन 16px (मुझे लगता है) अंतर शेष है। मुझे नहीं पता कि अंतराल कहां से आ रहा है। कृपया यहां बेझिझक ढूंढें http://jsfiddle.net/9scJE/ –

+0

मैंने स्क्रॉलबार दिखाने के लिए यह कोड किया था, यह सुनिश्चित नहीं है कि केवल ऑटो की बजाय स्क्रॉल क्यों डालना पड़ा, लेकिन इस तरह यह काम करता था, हालांकि यह सुनिश्चित नहीं है कि क्यों मैं उस क्षेत्र पर होवर करता हूं जब मैं स्क्रॉल करता हूं और स्क्रॉलबार दिखाता हूं जब मैं स्क्रॉल करता हूं और नहीं जब मैं सिर्फ div क्षेत्र '#myautoscroll { अधिकतम ऊंचाई: 200px; ओवरफ्लो-वाई: छुपा; } #myautoscroll: होवर { ओवरफ्लो-वाई: स्क्रॉल; } ' – nommer

4

:hover चयनकर्ता के साथ div का चयन

#div { overflow: hidden; } 

#div:hover { overflow:visible; }

स्रोत

2012-04-04 16:39:14

1

मुझे एक ही समस्या है और परिणाम के बिना उपरोक्त समाधानों का एक गुच्छा करने की कोशिश की है। बहुत सारे शोध के बाद मैं इस समाधान में आया था। बस इन लाइनों को अपनी सीएसएस फ़ाइल में पेस्ट करें।

div.myautoscroll { 
    height: 40ex; 
    width: 40em; 
    overflow: hidden; 
    border: 1px solid #444; 
    margin: 3em; 
} 
div.myautoscroll:hover { 
    overflow: auto; 
} 
div.myautoscroll p { 
    padding-right: 16px; 
} 
div.myautoscroll:hover p { 
    padding-right: 0px; 
} 


::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 7px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 4px; 
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 
}

क्या मेरे लिए हो रहा था था कि मैक OSX शेर और ऊपर (मैं Yosemite चला रहा हूँ) ऑटो छिपाने स्क्रॉलबार अधिक चिकना लग रहे करने के लिए। उपरोक्त कोड डिफ़ॉल्ट को ओवरराइट करता है और स्क्रॉलबार वापस लाता है ... होवर पर स्क्रॉल करने के लिए ओवरफ़्लो को बदलने के लिए सीएसएस के साथ संयुक्त यह नए मैक ओएसएक्स पर उपयोगकर्ताओं के लिए वांछित परिणाम प्राप्त करेगा। यहां एक पहेली है (मेरा खुद का नहीं, लेकिन वह एक जहां मुझे यह जवाब मिला)। http://jsfiddle.net/simurai/UsvLN/

स्रोत

2014-11-13 20:09:04

0

मैं इस समाधान के साथ आया था। मूल रूप से नकारात्मक मार्जिन लंबवत स्क्रॉलबार से कटौती करता है।

.hidden-scrollbar { 
    padding-right: 50px; 
    margin-right: -25px;   
    overflow-y: auto;   
} 

.hidden-scrollbar.hover-scrollbar:hover { 
    padding-right: 25px; 
    margin-right: 0; 
    overflow-y: auto; 
}

कम mixin

.hidden-scrollbar(@padding) { 
    padding-right: 2 * @padding; 
    margin-right: [email protected]; 
    overflow-y: auto;   

    &.hover-scrollbar:hover { 
     padding-right: @padding; 
     margin-right: 0; 
    } 
}

नोट: @padding कम से कम स्क्रॉलबार चौड़ाई होना चाहिए (उदाहरण के लिए 25px)

मूल रूप से अपने कम/सीएसएस को यह जोड़ सकते हैं और जोड़ने उस तत्व को कक्षा जिसे इसकी स्क्रॉलबार की आवश्यकता होती है।

स्रोत

2014-12-17 20:37:50

8

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

एक और:

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

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

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

स्रोत

2015-10-21 16:38:09 kizu

+0

यह दृष्टिकोण मेरे लिए अच्छा काम करता है, और यह अच्छा है कि यह अतिप्रवाह संपत्ति (और आपके द्वारा किए गए सभी मुद्दों) से गड़बड़ नहीं करता है। लेकिन उस पर एनीमेशन काम नहीं करता है। ऐसा लगता है कि दृश्यता एनिमेट नहीं कर सकती है (https://stackoverflow.com/questions/27900053/css-transition-with-visibility-not-working)। अस्पष्टता एनिमेट कर सकती है लेकिन जब मैं इस सेटअप में इसका उपयोग करता हूं, तो भीतर सामग्री।स्क्रॉलबॉक्स-सामग्री अस्पष्टता से भी प्रभावित होती है (सामग्री स्क्रॉलबार के साथ बाहर निकलती है)। क्या आपने इस दृष्टिकोण के साथ काम करने के लिए एनीमेशन भाग प्राप्त किया है? – Rebecca

0

यदि आप सामान्य दृश्य में छुपा ओवरफ्लो-वाई जोड़ने के लिए सीएसएस का उपयोग कर सकते हैं। तो आप: होवर इवेंट एडफ्लो-वाई: ऑटो जोड़ सकते हैं।

See This Link

आप jQuery का मंडराना घटना

See This Fiddle

स्निपेट का उपयोग का उपयोग कर सकते हैं:

012,351,

jQuery(".main_panel").hover(
 
    function() { 
 
    jQuery(this).addClass("show_cont"); 
 
    }, 
 
    function() { 
 
    jQuery(this).removeClass("show_cont"); 
 
    } 
 
);

.main_panel { 
 
    width: 300px; 
 
    height: 200px; 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 

 
.limt { 
 
    padding: 0; 
 
    display: inline-block; 
 
    width: 90%; 
 
    margin: 0; 
 
} 
 

 
ul.limt li { 
 
    display: inline-block; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    line-height: 28px; 
 
} 
 

 
.show_cont { 
 
    overflow-y: auto; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="main_panel"> 
 
    <ul class="limt"> 
 
    <li>Curabitur aliquet quam id dui posuere blandit.</li> 
 
    <li>Curabitur aliquet quam id dui posuere blandit.</li> 
 
    <li>Curabitur aliquet quam id dui posuere blandit.</li> 
 
    <li>Curabitur aliquet quam id dui posuere blandit.</li> 
 
    <li>Curabitur aliquet quam id dui posuere blandit.</li> 
 
    </ul> 
 
</div>

स्रोत

2017-05-22 10:12:08 Ram2210

+0

आपके समाधान को पहले से ही जवाबों से वर्णित किया गया है। कृपया इसे हटाने पर विचार करें। –

-1

#dv a{ 
 
    background:url(http://dhavalvachhani.16mb.com/images/Dhaval-Vachhani.png) 0 0 no-repeat; 
 
    background-size: 100%; 
 
    display:block; 
 
     text-align: center; 
 
     color: #fff; 
 
     padding-top: 20px;; 
 
    width:500px; 
 
    height:300px; 
 

 
    -webkit-transition: background-position 5s ease-in-out; 
 
    -moz-transition: background-position 5s ease-in-out; 
 
    -ms-transition: background-position 5s ease-in-out; 
 
    -o-transition: background-position 5s ease-in-out; 
 
    transition: background-position 5s ease-in-out; 
 
} 
 

 
#dv a:hover { 
 
    background-position:0px 100%; 
 

 
}

<div id="dv"> 
 
<a href="http://dhavalvachhani.16mb.com/" target="_blank"></a>

स्रोत

2018-02-03 08:45:43 Dhaval

दिखा स्क्रॉलबार केवल जब माउसओवर div

उत्तर

संबंधित मुद्दे