CSS overflow-x: มองเห็นได้; และล้น -y: ซ่อนอยู่; ทำให้เกิดปัญหาแถบเลื่อน

สมมติว่าคุณมีสไตล์และมาร์กอัป:

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>มีแถบเลื่อนที่ด้านล่างแม้ว่าฉันได้ระบุค่าที่มองเห็นและซ่อนสำหรับล้น Y / X

(พบใน Chrome 11 และ Opera (?))

ฉันเดาว่าต้องมีคุณสมบัติของ w3c หรือบางอย่างที่บอกว่าจะเกิดขึ้น แต่สำหรับชีวิตของฉันฉันไม่สามารถหาสาเหตุได้

JSFiddle

UPDATE: -ulผมพบว่าวิธีการที่จะบรรลุผลเดียวกันโดยการเพิ่มองค์ประกอบอื่นห่อรอบที่ ลองดูสิ

หลังจากค้นหาอย่างจริงจังดูเหมือนว่าฉันได้พบคำตอบสำหรับคำถามของฉัน:

จาก: http://www.brunildo.org/test/Overflowxy2.html

ใน Gecko, Safari, Opera, 'visible' จะกลายเป็น 'auto' และเมื่อรวมกับ 'hidden' (กล่าวอีกนัยหนึ่ง: 'visible' จะกลายเป็น 'auto' เมื่อรวมกับสิ่งอื่นที่แตกต่างจาก 'visible') Gecko 1.8, Safari 3, Opera 9.5 ค่อนข้างสอดคล้องกันในหมู่พวกเขา

นอกจากนี้ยังมีข้อมูลจำเพาะ W3Cพูดว่า:

ค่าที่คำนวณได้ของ 'overflow-x' และ 'overflow-y' นั้นเหมือนกับค่าที่ระบุยกเว้นว่าจะไม่สามารถใช้ชุดค่าผสมที่มี 'visible' ได้: หากมีการระบุเป็น 'visible' และอีกอันคือ 'scroll' หรือ 'อัตโนมัติ' จากนั้น 'มองเห็น' ถูกตั้งค่าเป็น 'อัตโนมัติ' ค่าที่คำนวณได้ของ 'overflow' มีค่าเท่ากับค่าที่คำนวณได้ของ 'overflow-x' หาก 'overflow-y' เหมือนกัน มิฉะนั้นจะเป็นคู่ของค่าที่คำนวณได้ของ 'overflow-x' และ 'overflow-y'

เวอร์ชั่นสั้น:

หากคุณกำลังใช้visibleอย่างใดอย่างหนึ่งoverflow-xหรือoverflow-yและสิ่งอื่น ๆ กว่าvisibleอื่น ๆ ที่คุ้มค่าถูกตีความว่าเป็นvisibleauto

การแฮ็กราคาถูกอีกอันซึ่งดูเหมือนจะหลอกลวง:

style="padding-bottom: 250px; margin-bottom: -250px;"ในองค์ประกอบที่การโอเวอร์โฟลว์แนวตั้งได้รับการตัดออกโดยมี250พิกเซลมากเท่าที่คุณต้องการสำหรับดรอปดาวน์ ฯลฯ

ฉันพบวิธี CSS ในการเลี่ยงสิ่งนี้เมื่อใช้ปลั๊กอิน Cycle jQuery Cycle ใช้ JavaScript เพื่อตั้งค่าสไลด์ของฉันoverflow: hiddenดังนั้นเมื่อตั้งค่ารูปภาพของฉันwidth: 100%เป็นรูปภาพจะดูตัดในแนวตั้งและดังนั้นฉันบังคับให้พวกเขามองเห็นได้ด้วย!importantและเพื่อหลีกเลี่ยงการแสดงภาพเคลื่อนไหวสไลด์ออกจากกล่องที่ฉันตั้งไว้overflow: hiddenในคอนเทนเนอร์ div ของ สไลด์ หวังว่ามันจะเหมาะกับคุณ

อัพเดท - โซลูชั่นใหม่:

ปัญหาดั้งเดิม -> http://jsfiddle.net/xMddf/1/ (แม้ว่าฉันoverflow-y: visibleจะใช้มันกลายเป็น "อัตโนมัติ" และ "เลื่อน" จริง ๆ )

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

วิธีแก้ปัญหาใหม่ -> http://jsfiddle.net/xMddf/2/ (ฉันพบวิธีแก้ปัญหาโดยใช้wrapper div เพื่อนำไปใช้overflow-xและoverflow-yองค์ประกอบ DOM ต่าง ๆ ตามที่James Khouryแนะนำเกี่ยวกับปัญหาการรวมvisibleและhiddenองค์ประกอบ DOM เดียว)

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

ผมเคยทำงานเป็นปัญหานี้เมื่อพยายามที่จะสร้างแถบด้านข้างในตำแหน่งที่คงที่มีทั้งแนวตั้งเนื้อหาเลื่อนและซ้อนกันเด็กในตำแหน่งที่แน่นอนที่จะแสดงนอกขอบเขตแถบด้านข้าง

วิธีการของฉันประกอบด้วยการใช้แยกต่างหาก:

• overflow: visibleคุณสมบัติองค์ประกอบแถบด้านข้าง
• overflow-y: autoคุณสมบัติการ sidebar ห่อหุ้มภายใน

กรุณาตรวจสอบตัวอย่างด้านล่างหรือcodepen ออนไลน์

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>

ผมใช้content+wrapperวิธี ... แต่ผมทำอะไรที่แตกต่างจากที่กล่าวถึงเพื่อให้ห่างไกล: ผมทำให้แน่ใจว่าขอบเขตเสื้อคลุมของฉันไม่ไม่สอดคล้องกับขอบเขตของเนื้อหาในทิศทางที่ผมอยากที่จะมองเห็น

หมายเหตุสำคัญ: มันเป็นเรื่องง่ายพอที่จะรับcontent+wrapper, same-boundsแนวทางการทำงานในเบราว์เซอร์เดียวหรืออื่นขึ้นอยู่กับการรวมกัน CSS ต่างๆposition, overflow-*ฯลฯ ... แต่ผมไม่เคยใช้วิธีการที่จะรับพวกเขาทั้งหมดที่ถูกต้อง (ขอบ Chrome, Safari, .. )

แต่เมื่อฉันมีสิ่งที่ชอบ:

  <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>

... เบราว์เซอร์ทั้งหมดมีความสุข

ขณะนี้มีวิธีการใหม่ในการแก้ไขปัญหานี้ - หากคุณลบตำแหน่ง: สัมพันธ์กับคอนเทนเนอร์ที่ต้องการให้มองเห็น overflow-y คุณสามารถเปิดดู overflow-y และ overflow-x ที่ซ่อนอยู่และในทางกลับกัน (มีส่วนเกิน - x มองเห็นและซ่อนไว้ล้นให้ตรวจสอบให้แน่ใจว่าคอนเทนเนอร์ที่มีคุณสมบัติที่มองเห็นไม่ได้อยู่ในตำแหน่งที่ค่อนข้าง)

ดูโพสต์นี้จากเคล็ดลับ CSS สำหรับรายละเอียดเพิ่มเติม - มันใช้ได้สำหรับฉัน: https://css-tricks.com/popping-hidden-overflow/