सीएसएस अतिप्रवाह-एक्स: दृश्यमान; और अतिप्रवाह-य: छिपा हुआ; स्क्रॉलबार समस्या का कारण

Question

मान लीजिए कि आपके पास कुछ शैली और मार्कअप है:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

जब आप यह देखते हैं। <ul>तल पर एक स्क्रॉल पट्टी भले ही मैं अतिप्रवाह x / y के लिए दिखाई दे और छिपा मूल्यों निर्दिष्ट किया है है।

(Chrome 11 और ओपेरा (?) पर देखा गया)

मुझे लगता है कि वहाँ कुछ w3c कल्पना या कुछ ऐसा होने के लिए कह रहा होना चाहिए, लेकिन मेरे जीवन के लिए मैं क्यों काम नहीं कर सकता।

JSFiddle

अद्यतन: - मैं एक और परिणाम के आसपास लिपटे एक और तत्व जोड़कर एक ही परिणाम प्राप्त करने का एक तरीका मिल गया ul। इसकी जांच - पड़ताल करें।

Comments

आपका वांछित परिणाम क्या है? jsfiddle.net/Kyle_Sevenoaks/3xv6A/2

— काइल

@kyle इसे थोड़ा और देखना चाहिए: jsfiddle.net/3xv6A/5 दुर्भाग्य से अगर मैं overflow-x hidden;इसे सेट करता हूं तो यह स्क्रैच को हटा देता है लेकिन जैसा कि मुझे नीचे के बॉर्डर को छिपाने के लिए एलई तत्वों की आवश्यकता होती है ताकि यह वांछित धराशायी प्रभाव दे। मैं यह नहीं समझता कि overflow-x: visibleस्क्रॉल बार क्यों बनता है। यह afaik नहीं होना चाहिए

— जेम्स खुरै

@ JamesKhoury आप अपने समाधान में थोड़ा विस्तार कर सकते हैं? मैं वास्तव में यह काम नहीं कर सकता

— जॉर्ज कैटसनोस

@GeorgeKatsanos वर्कअराउंड: jsfiddle.net/3xv6A/9 माता-पिता होने पर निर्भर करता है overflow: hidden;और एक बच्चा <ul>होने के नाते डाला जाता है overflow: visible।

— जेम्स खूर्नी

@JamesKhoury क्या आपको लगता है कि यह एम्बेड के

— Katsanos

Answer 1

कुछ गंभीर खोज के बाद ऐसा लगता है कि मुझे अपने प्रश्न का उत्तर मिल गया है:

से: http://www.brunildo.org/test/Overflowxy2.html

गेको, सफारी, ओपेरा में, 'दृश्यमान' 'ऑटो' भी बन जाता है, जब 'छिपा' के साथ संयुक्त होता है (दूसरे शब्दों में: 'दृश्यमान' 'ऑटो' बन जाता है जब 'दृश्यमान' से अलग कुछ और के साथ संयुक्त)। गेको 1.8, सफारी 3, ओपेरा 9.5 उनमें से काफी सुसंगत हैं।

डब्ल्यू 3 सी कल्पना भी कहती है:

'अतिप्रवाह-एक्स' और 'अतिप्रवाह-वाई' के गणना मूल्य उनके निर्दिष्ट मानों के समान हैं, सिवाय इसके कि 'दृश्यमान' के साथ कुछ संयोजन संभव नहीं हैं: यदि कोई 'दृश्यमान' के रूप में निर्दिष्ट है और दूसरा 'स्क्रॉल' है या 'ऑटो', फिर 'दृश्यमान' को 'ऑटो' पर सेट किया जाता है। 'अतिप्रवाह' का परिकलित मान 'अतिप्रवाह-x' के संकलित मूल्य के बराबर है यदि 'अतिप्रवाह-य' समान है; अन्यथा यह 'अतिप्रवाह-एक्स' और 'अतिप्रवाह-वाई' के संगणित मूल्यों की जोड़ी है।

लघु संस्करण:

यदि आप या visibleतो overflow-xया overflow-yकुछ और के visibleलिए दूसरे के लिए उपयोग कर रहे हैं , तो visibleमूल्य की व्याख्या की जाती है auto।

Comments

मैं समझता हूं कि W3C इसे इस तरह निर्दिष्ट करता है, लेकिन इसके पीछे प्रेरणा क्या है? मुझे यह काफी अजीब और असंगत व्यवहार लगता है, जिसके परिणामस्वरूप गड़बड़ काम-आस-पास होते हैं जिन्हें तुच्छ HTML- तत्वों को जोड़ने की आवश्यकता होती है।

— इरविन

@ इरविन मैं सहमत हूं, उम्मीद है कि किसी ने कल्पना को अपडेट करने का फैसला किया है।

— जेम्स ख्योरी

आप सही हैं लेकिन इसका कोई मतलब नहीं है। सबसे आम कारण जो आप चाहते हैं कि x और y है तो आप एक को छिपा सकते हैं और दूसरे को दृश्यमान बना सकते हैं।

— rescuecreative

यह अपंग है। क्यों हम अनुमति नहीं दे सकते overflow-x:visibleदौरान overflow-y:hiddenएक माता पिता / बच्चे हैक बिना? सुंदर चारपाई, आईएमओ।

— छिपकर जाना

यह पूरी तरह से अपंग है। मैं एक बूटस्ट्रैप नावबार स्क्रॉल में ड्रॉपडाउन लिंक का एक गुच्छा क्षैतिज रूप से बनाने की कोशिश कर रहा था, लेकिन जो ड्रॉपडाउन को तोड़ता है, जिस पर भरोसा करते हैं overflow-y: visible। बू सीएसएस!

— एंडी

Answer 2

एक और सस्ता हैक, जो चाल करने के लिए लगता है:

style="padding-bottom: 250px; margin-bottom: -250px;"उस तत्व पर जहां ऊर्ध्वाधर अतिप्रवाह कटऑफ प्राप्त 250कर रहा है, आपके ड्रॉपडाउन के लिए जितनी आवश्यकता हो उतने पिक्सेल का प्रतिनिधित्व करने के साथ , आदि।

Comments

बहुत बहुत धन्यवाद, हालांकि यह हैकिंग लगता है, लेकिन समस्या को हल करने का सबसे अच्छा तरीका लगता है। Overflows css में भयानक हैं :(

— सर्ज ईरेमीव

यह क्षैतिज स्क्रॉलबार को दूर दिखाई देता है

— nafg

यह तत्व के नीचे 250px के लिए पॉइंटर घटनाओं को भी रोकता है। लेकिन मुझे उसके चारों ओर एक रास्ता मिला, और यह समाधान वह है जो मैं उपयोग कर रहा हूं।

— क्रिस Chudzicki

2 साल बाद और यह अभी भी इस समस्या का सबसे अच्छा जवाब है ... उम्मीद है कि क्रोमियम के खुले स्रोत परियोजना पर अभी तक एक और ब्राउज़र (Microsoft एज) के साथ हम ब्राउज़र सुविधाओं के तेजी से विकास के साथ-साथ बेहतर ब्राउज़र भी देखेंगे। संगतता।

— स्पेंसर ओ'रेली

मेरे विशेष परिदृश्य में, जहां position: relativeरैपरों को हटाना या उपयोग करना संभव नहीं था, यह एकमात्र समाधान था जो काम करता था, हालांकि इसमें तत्व के अंदर बाल तत्वों के लिए बहुत सारे कुरूप मार्जिन जोड़ने की भी आवश्यकता होती थी, जिसे मैं overflow-x: hiddenहैकी की क्षतिपूर्ति के लिए सेट करना चाहता था। गद्दी। हालांकि, यह मुझे बचा लिया, इसलिए धन्यवाद!

— फिलिप स्ट्रैटफ़ोर्ड

Answer 3

मुझे मूल रूप से Cycle jQuery प्लगइन का उपयोग करते समय इसे बायपास करने के लिए एक सीएसएस तरीका मिला। साइकिल मेरी स्लाइड को सेट करने के लिए जावास्क्रिप्ट का उपयोग करता है overflow: hidden, इसलिए जब मेरे चित्रों को चित्रों को सेट करने width: 100%से लंबवत कट लगेगा, और इसलिए मैंने उन्हें दिखाई देने के लिए मजबूर किया !importantऔर स्लाइड एनीमेशन को उस बॉक्स से बाहर दिखाने से बचने के लिए जिसे मैंने overflow: hiddenकंटेनर डिव में सेट किया है। फिसल पट्टी। आशा है कि यह आप के लिए काम करता है।

अद्यतन - नया समाधान:

मूल समस्या -> http://jsfiddle.net/xMddf/1/ (भले ही मैं इसका उपयोग overflow-y: visible"ऑटो" और वास्तव में "स्क्रॉल" हो जाता हूं ।)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

नया समाधान -> http://jsfiddle.net/xMddf/2/ (मुझे एक रैपर div का उपयोग करने के लिए overflow-xऔर overflow-yअलग-अलग DOM तत्वों का उपयोग करने के लिए एक वर्कअराउंड मिला, क्योंकि जेम्स खौरिए ने संयोजन की समस्या visibleऔर hiddenएकल DOM तत्व की सलाह दी ।)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}

Comments

यह कैसे लागू होता है? यह अतिप्रवाह-एक्स या अतिप्रवाह-वाई पर काम नहीं करता है।

— जेम्स खुरै जूल

@Macumbaomuetre स्पष्ट है, धन्यवाद +1। यह "अपडेट" के समान है जिसे मैंने जोड़ा है। मूल रूप से मैं रैपिंग डिव को बदलने में सक्षम नहीं था और मेरा समाधान भी इसी तरह समाप्त हुआ: jsfiddle.net/3xv6A/338

— जेम्स खुरे

यह समाधान लागू नहीं होता है। सवाल यह है कि overflow-x:visible;और overflow-y:hidden। कोई और रास्ता नही।

— जैकबॉवस्की

@TomasJansson @Edward यह करता है काम, आप बस स्वैप करने के लिए है, जहां आप लागू overflow-xऔर -y: अद्यतन बेला ।

— सिर्फ एक छात्र

जैसे ही रैपर किसी कारण से चौड़ाई प्राप्त करता है वैसे ही विफल हो जाता है - jsfiddle.net/ad1941k9/16

— डेविड मिस्टर

Answer 4

जब मैं लंबित स्क्रॉल करने योग्य सामग्री और नेस्टेड निरपेक्ष तैनात बच्चों को साइडबार सीमाओं के बाहर प्रदर्शित करने के लिए दोनों के साथ एक निश्चित तैनात साइडबार बनाने की कोशिश कर रहा हूं, तो मैं इस मुद्दे पर चला गया हूं ।

मेरा दृष्टिकोण अलग से लागू होता है:

• overflow: visibleसाइडबार तत्व के लिए एक संपत्ति
• overflow-y: autoआंतरिक आवरण के साइडबार के लिए एक संपत्ति

कृपया नीचे दिए गए उदाहरण या ऑनलाइन कोडपैन की जांच करें ।

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

Comments

मुझे पूरा यकीन है कि यह वही समाधान है जो अन्य लोगों ने प्रस्तुत किया है इसके autoबजाय hidden।

— जेम्स ख्योरी

@JamesKhoury लेकिन यह केवल मैं ही समझ पा रहा हूं क्योंकि यह position

— गुची

Answer 5

मैंने content+wrapperदृष्टिकोण का उपयोग किया ... लेकिन मैंने अब तक उल्लिखित की तुलना में कुछ अलग किया: मैंने यह सुनिश्चित किया कि मेरे आवरण की सीमाएँ उस सामग्री की सीमाओं के साथ नहीं चलती हैं जिस दिशा में मैं दिखाई देना चाहता था ।

महत्वपूर्ण नोट: यह content+wrapper, same-boundsएक ब्राउज़र या किसी अन्य पर काम करने के लिए दृष्टिकोण प्राप्त करने के लिए पर्याप्त आसान था , आदि position, के विभिन्न सीएसएस संयोजनों पर निर्भर करता है overflow-*... लेकिन मैं कभी भी उन सभी को सही (एज, क्रोम, सफारी) प्राप्त करने के लिए उस दृष्टिकोण का उपयोग नहीं कर सका । ..)।

लेकिन जब मेरे पास कुछ ऐसा था:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... सभी ब्राउज़र खुश थे।

Answer 6

अब इस मुद्दे को संबोधित करने का एक नया तरीका है - यदि आप स्थिति को निकालते हैं: कंटेनर से सापेक्ष जिसे ओवरफ्लो-वाई दिखाई देने की आवश्यकता है, तो आपके पास अतिप्रवाह-वाई दृश्यमान और अतिप्रवाह-एक्स छिपी हो सकती है, और इसके विपरीत- (अतिप्रवाह) एक्स दृश्यमान और अतिप्रवाह-वाई छिपी हुई है, बस सुनिश्चित करें कि दृश्यमान संपत्ति के साथ कंटेनर अपेक्षाकृत तैनात नहीं है)।

अधिक जानकारी के लिए CSS ट्रिक्स की इस पोस्ट को देखें - इसने मेरे लिए काम किया: https://css-tricks.com/popping-hidden-overx/

Comments

लेकिन इसके लिए तत्व को सही ढंग से रखने के लिए कुछ जावास्क्रिप्ट की आवश्यकता होगी अगर यह निरपेक्ष है

— gaurav5430