CSS tràn-x: hiển thị; và tràn-y: ẩn; gây ra sự cố thanh cuộn

Giả sử bạn có một số phong cách và đánh dấu:

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>

Khi bạn xem điều này. Thanh <ul>có một thanh cuộn ở phía dưới mặc dù tôi đã chỉ định các giá trị hiển thị và ẩn cho tràn x / y.

(quan sát trên Chrome 11 và opera (?))

Tôi đoán phải có một số thông số w3c hoặc một cái gì đó nói điều này xảy ra nhưng đối với cuộc sống của tôi, tôi không thể tìm ra lý do tại sao.

Câu đố

CẬP NHẬT: - Tôi tìm thấy một cách để đạt được kết quả tương tự bằng cách thêm một yếu tố khác bao quanh ul. Kiểm tra nó ra.

Sau khi tìm kiếm nghiêm túc, có vẻ như tôi đã tìm thấy câu trả lời cho câu hỏi của mình:

từ: http://www.brunasy.org/test/Overflowxy2.html

Trong Gecko, Safari, Opera, 'hiển thị' cũng trở thành 'tự động' khi được kết hợp với 'ẩn' (nói cách khác: 'hiển thị' trở thành 'tự động' khi được kết hợp với bất kỳ thứ gì khác với 'hiển thị'). Gecko 1.8, Safari 3, Opera 9.5 khá nhất quán trong số đó.

thông số W3C cũng nói:

Các giá trị được tính toán của 'overflow-x' và 'overflow-y' giống như các giá trị được chỉ định của chúng, ngoại trừ một số kết hợp với 'thấy được' là không thể: nếu một được chỉ định là 'hiển thị' và cái còn lại là 'cuộn' hoặc 'tự động', sau đó 'hiển thị' được đặt thành 'tự động'. Giá trị tính toán của 'tràn' bằng với giá trị được tính của 'tràn-x' nếu 'tràn-y' là như nhau; mặt khác, đó là cặp giá trị được tính toán của 'overflow-x' và 'overflow-y'.

Phiên bản ngắn:

Nếu bạn đang sử dụng visiblecho một trong hai overflow-xhoặc overflow-ymột cái gì đó ngoài visiblecái khác, visiblegiá trị được hiểu là auto.

một hack giá rẻ khác, dường như thực hiện thủ thuật:

style="padding-bottom: 250px; margin-bottom: -250px;"trên phần tử mà phần tràn dọc đang bị cắt, với 250đại diện là bao nhiêu pixel bạn cần cho trình đơn thả xuống của mình, v.v.

Ban đầu tôi đã tìm thấy một cách CSS để bỏ qua điều này khi sử dụng plugin Chu kỳ jQuery. Chu kỳ sử dụng JavaScript để đặt trang chiếu của tôi thành overflow: hidden, vì vậy khi đặt hình ảnh của tôi width: 100%thành hình ảnh sẽ bị cắt theo chiều dọc, và vì vậy tôi buộc chúng phải hiển thị cùng !importantvà để tránh hiển thị hình ảnh động ra khỏi hộp tôi đặt overflow: hiddenvào div container của cầu trượt. Hi vọng nó sẽ giúp ích cho bạn.

CẬP NHẬT - Giải pháp mới:

Vấn đề ban đầu -> http://jsfiddle.net/xMddf/1/ (Ngay cả khi tôi sử dụng, overflow-y: visiblenó sẽ trở thành "tự động" và thực sự là "cuộn".)

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

Giải pháp mới -> http://jsfiddle.net/xMddf/2/ (Tôi đã tìm thấy một cách giải quyết bằng cách sử dụng div trình bao bọc để áp dụng overflow-xvà overflow-ycho các phần tử DOM khác nhau như James Khoury đã khuyên về vấn đề kết hợp visiblevà hiddenvới một phần tử DOM duy nhất.)

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

Tôi đã gặp phải vấn đề này khi cố gắng xây dựng một thanh bên được định vị cố định với cả nội dung có thể cuộn theo chiều dọc và trẻ em được định vị tuyệt đối lồng nhau sẽ được hiển thị bên ngoài ranh giới của thanh bên .

Cách tiếp cận của tôi bao gồm áp dụng riêng:

• một thuộc overflow: visibletính cho phần tử thanh bên
• một thuộc overflow-y: autotính để bọc bên trong sidebar

Vui lòng kiểm tra ví dụ dưới đây hoặc một codepen trực tuyến .

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>

Tôi đã sử dụng content+wrappercách tiếp cận ... nhưng tôi đã làm một cái gì đó khác với đề cập cho đến nay: Tôi chắc chắn rằng ranh giới của trình bao bọc của tôi KHÔNG phù hợp với ranh giới của nội dung theo hướng mà tôi muốn hiển thị .

Chú ý quan trọng: Đó là dễ dàng, đủ để có được content+wrapper, same-boundscách tiếp cận để làm việc trên một trình duyệt này hay cách khác tùy thuộc vào sự kết hợp css hình position, overflow-*, vv ... nhưng tôi không bao giờ có thể sử dụng cách tiếp cận để có được chúng tất cả đúng (Edge, Chrome, Safari,. ..).

Nhưng khi tôi có một cái gì đó như:

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

... Tất cả các trình duyệt đều hạnh phúc.

Hiện tại có một cách mới để giải quyết vấn đề này - nếu bạn loại bỏ vị trí: tương đối khỏi vùng chứa cần hiển thị tràn-y, bạn có thể ẩn tràn-y và ẩn tràn-x, và ngược lại (có tràn- x ẩn và tràn-y, chỉ cần đảm bảo rằng thùng chứa với thuộc tính hiển thị không được định vị tương đối).

Xem bài đăng này từ Thủ thuật CSS để biết thêm chi tiết - nó hoạt động với tôi: https://css-tricks.com/popping-hidden-overflow/