CSS overflow-y : 눈에 띄지 않는 오버 플로우 -x : 스크롤

Question

검색과 같은 몇 가지 질문을 보았지만 질문에 적절하게 답변을 얻지 못했거나 대답을 제공하지 않았습니다. 그래서 다시 물어 보겠습니다.

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

좋아, 그저 그 예입니다. 하지만 기본적으로, 내가 달성하려고하는 것은 .child 클래스를 y 축에서 스크롤 가능하게하는 것입니다. 위아래로 스크롤하십시오. 하지만 난 x 축 .... 하위 메뉴가 .parent 컨테이너 외부에서 볼 수 싶습니다.

의미가 있습니까? 따라서 페이지가 렌더링 될 때 브라우저가 자동으로 오버플로를 해석하고 별도의 축을 따르지 않게됩니다. 나는 틀린 일을하고 있습니까? 아니면 브라우저가 아직 CSS3 사양에 맞지 않았습니까? 대부분 Chrome에서만 테스트되었습니다.

Answer 1

나는 그것을 알아 냈다!

부모가 오버플로되어야합니다 : 자동; .child는 position : relative이어야합니다. .child-menu는 position : fixed이어야합니다. 아니오 상단 또는 좌측 위치. 이렇게하면 내용과 함께 인라인으로 유지됩니다.

위쪽 또는 왼쪽이 아닌 하위 메뉴 사용 여백을 이동해야하는 경우. margin-left 예 : -100px;

Answer 2

여기에서 해결되었습니다. 그들은 CSS와 JS를 사용합니다. 당신이 스크롤 할 때

.child:hover .child-menu { display: block; } 

.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } 
    .child { position:static; } 
    .child-menu { position:absolute; display:inline-block; display: none; } 

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/