크롬 너비가 스크롤바를 제거한 후 다시 계산됩니다.

Question

내부에 항목 목록이있는 컨테이너가 있으며 마우스가 컨테이너 위에있을 때만 스크롤 바를 표시하고 싶습니다. 지금까지 나는 overflow:hidden과 :hover overflow-y:auto을 사용하여 이것을 달성했습니다. 여기를 참고하십시오 : https://jsfiddle.net/v4jrakak/

Edge와 Firefox에서는 예상대로 작동합니다. 하지만 Chrome (52)에서는 컨테이너 밖으로 마우스를 가져간 후에 항목의 너비가 전체 너비까지 다시 커지지 않습니다. 대신, 패딩이 증가한 것처럼 보이는 공간이 측면에 남아 있습니다.

Chrome 요소 관리자를 사용하면 개발자 도구 창에서 요소 위로 마우스를 가져 가면 페이지의 div의 툴팁과 개발자 도구 창의 스타일 부분에있는 다이어그램이 다른 요소를 선택할 때까지 다양한 너비가 표시됩니다 그리고 다시 돌아 오십시오. (업데이트하는 것이 아닌 검사관 일 수도 있습니다) 너비가 조정기를 통해 수정되면 Chrome에서이를 감지하고 너비를 올바르게 재조정합니다. 예를 들어, inspector를 통해 .item 스타일에서 너비 : 100 %를 비활성화하면 (기본 : auto로 설정하고 전체 너비로 설정해야 함) div의 너비를 시각적으로 수정합니다. 그리고 width : 100 % 규칙을 inspector를 통해 다시 활성화하면 그 지점에서 너비가 정확하기 때문에 아무것도 변경되지 않습니다.

이 항목이 Chrome 버그입니까? 스크롤바가 제거 된 후 너비를 올바르게 재조정 할 수있는 방법이 있습니까?

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
    width: 460px; 
 
    border: 1px solid black; 
 
    padding: 0 8px; 
 
    margin: 0; 
 
    height: 600px; 
 
    overflow: hidden; 
 
} 
 
.wrapper:hover { 
 
    overflow-y: auto; 
 
} 
 
.item { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: gray; 
 
    margin: 8px 0; 
 
}

<div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 1

당신은 그 문제를 해결하기 위해 .wrapper:hover에 유사한 패딩을 추가 할 수 있습니다. 그래도 해결 방법입니다.

*,*:before,*:after {box-sizing:border-box;} 
 

 
.wrapper{ 
 
    position:relative; 
 
    width:460px; 
 
    border:1px solid black; 
 
    padding: 0 8px; 
 
    margin: 0; 
 
    height: 600px; 
 
    overflow:hidden; 
 
} 
 

 
.wrapper:hover { 
 
    overflow-y:auto; 
 
    padding-right:7px; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    width:100%; 
 
    height: 150px; 
 
    background-color: gray; 
 
    margin: 8px 0; 
 
}

<div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>