스타일과 마크 업이 있다고 가정합니다.
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 사양이나 이것이 일어날 것을 말하는 무언가가 있어야한다고 생각하지만 내 인생에서 나는 그 이유를 해결할 수 없다.
업데이트 :-에 감싸 인 다른 요소를 추가하여 동일한 결과를 달성하는 방법을 찾았습니다 ul. 확인 해봐.
답변
진지한 검색 후 내 질문에 대한 답변을 찾은 것 같습니다.
에서: http://www.brunildo.org/test/Overflowxy2.html
Gecko, Safari, Opera에서 ‘hidden’과 결합하면 ‘visible’이 ‘auto’가됩니다 (즉, ‘visible’과 다른 것을 결합하면 ‘visible’이 ‘auto’가됩니다). Gecko 1.8, Safari 3, Opera 9.5는 그중에서도 꽤 일관성이 있습니다.
또한 W3C 사양 은 다음과 같이 말합니다.
‘overflow-x’및 ‘overflow-y’의 계산 된 값은 ‘visible’과의 일부 조합이 불가능하다는 점을 제외하고는 지정된 값과 동일합니다. 하나가 ‘visible’로 지정되고 다른 하나가 ‘scroll’인 경우 또는 ‘auto’인 경우 ‘visible’이 ‘auto’로 설정됩니다. ‘overflow-y’가 동일한 경우 ‘overflow’의 계산 된 값은 ‘overflow-x’의 계산 된 값과 같습니다. 그렇지 않으면 ‘overflow-x’와 ‘overflow-y’의 계산 된 값 쌍입니다.
짧은 버전 :
당신이 사용하는 경우 visible중 하나에 대한 overflow-x또는 overflow-y이외의 뭔가 visible다른 들어, visible값으로 해석됩니다 auto.
답변
트릭을 수행하는 것처럼 보이는 또 다른 저렴한 해킹 :
style="padding-bottom: 250px; margin-bottom: -250px;"수직 오버플로가 발생하는 요소에서 250드롭 다운에 필요한만큼의 픽셀 을 나타내는 등
답변
원래 Cycle jQuery 플러그인을 사용할 때 이것을 우회하는 CSS 방법을 찾았습니다. 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/
(I는 사용하여 해결 방법을 찾을 래퍼 적용 DIV를 overflow-x하고 overflow-y같은 다른 DOM 요소에 제임스 쿠리는 결합의 문제에 조언 visible과 hidden하나의 DOM 요소에 있습니다.)
#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}답변
세로로 스크롤 가능한 콘텐츠 가 모두 있는 고정 된 위치 지정된 사이드 바를 만들려고 할 때이 문제가 발생했습니다. 중첩 절대 아이를 배치 할 수 밖에 사이드 바의 경계를 표시 .
내 접근 방식은 별도로 적용되었습니다.
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>답변
내가 사용하는 content+wrapper방법을 … 하지만 지금까지 언급 한 것보다 뭔가 다른했다 : 나는 확실히 내 래퍼의 경계는 않았다고했다 NOT 내용의 경계에 줄을 내가 볼 수 있도록 싶었 방향을 .
중요 참고 : 쉽게 얻을 충분했다 content+wrapper, same-bounds다양한 CSS의 조합에 따라 하나의 브라우저 또는 다른에 대한 작업에 대한 접근 방식을 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>… 모든 브라우저가 행복했습니다.
답변
이제이 문제를 해결하는 새로운 방법이 있습니다 : relative를 제거하면 overflow-y를 표시 해야하는 컨테이너에서 relative, overflow-y visible 및 overflow-x를 숨길 수 있으며 그 반대도 가능합니다 (overflow- x visible 및 overflow-y hidden, visible 속성을 가진 컨테이너가 상대적으로 배치되지 않았는지 확인하십시오).
자세한 내용은 CSS 트릭 에서이 게시물을 참조하십시오-그것은 나를 위해 일했습니다 : https://css-tricks.com/popping-hidden-overflow/