Webkit 스크롤바의 왼쪽 여백과 오른쪽 여백은 틀린가요?

Question

왼쪽 및 오른쪽 여백이있는 스크롤 막대가 필요한 드롭 다운이 있습니다. -webkit-scrollbar를 사용하고 있습니다 만, 스크롤 축을 따라 여백 만 지원하므로 컨테이너 안의 항목에 오른쪽 여백을두고 수평 여백을 대략적으로 비교했습니다. 내 코드에서 볼 수있는 것처럼 외부 div.

그러나 이것은 컨테이너에 스크롤 할 수있는 항목이 충분하지 않은 경우보기 흉한 여분의 오른쪽 채우기를 만듭니다 (이 예에서 두 번째 드롭 다운 참조). 스크롤 바가 없을 때 오른쪽 모서리가 다른 모든 모서리와 똑같이 보이기를 바랍니다. CSS를 전용 솔루션에 대한

.dropdown { 
 
    width: 360px; 
 
    padding-right: 10px; /* pseudo-right-margin for scrollbar */ 
 
    background-color: green; 
 
    padding-bottom: 10px; 
 
    max-height: 365px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.itemContainer { 
 
    max-height: 355px; 
 
    overflow-y: auto; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
} 
 

 
.item { 
 
    background-color: white; 
 
    height: 51px; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; /* pseudo-left-margin for scrollbar */ 
 
} 
 

 
.item:last-of-type { 
 
    margin-bottom: 0px; 
 
} 
 

 
@media screen { 
 
    .itemContainer::-webkit-scrollbar { 
 
     width: 6px; 
 
     border-radius: 2px; 
 
    } 
 
    .itemContainer::-webkit-scrollbar-thumb { 
 
     border-radius: 2px; 
 
     background-color: black; 
 
     border: solid red 10px; 
 
    } 
 
    .itemContainer::-webkit-scrollbar-track { 
 
     margin-top: 10px; 
 
     background-color: yellow; 
 
     width: 6px; 
 
    } 
 
}

<div class="dropdown"> 
 
    <div class="itemContainer"> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <div class="itemContainer"> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    <div class="item">thing</div> 
 
    </div> 
 
</div>

내 유일한 생각은 어떻게 든 .item을 사용하고 있습니다 : n 번째 자녀 (5) 의사 선택을 드롭 다운 5 개 이상의 항목이 스크롤되기 때문에, 그러나 나는 그것을 줄 것입니다 어떤 재산 몰라요.

나는 이미 자바 스크립트 솔루션을 가지고 있지만 이것이 가능하다면 나는 단지 이것을 사용하고 싶다. (또한 항상 스크롤바를 보여주는 것은 용인 할 수 없습니다.)

Answer 1

좋습니다. 그렇게 열심히 아니었지만 불행히도 내 솔루션에는 많은 추가 HTML이 있습니다. 의견이나 설명이 필요하면 알려주십시오. 결과는 다음과 같습니다. 몇 마디에

.dropdown { 
 
    width: 360px; 
 
    background-color: green; 
 
    padding-bottom: 10px; 
 
    max-height: 365px; 
 
    margin-bottom: 20px; 
 
} 
 
.itemContainer { 
 
    max-height: 355px; 
 
    overflow-y: auto; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    margin-right: 10px; 
 
} 
 
.itemContainer>div { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.item { 
 
    display: table-row; 
 
} 
 
.item>div{ 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    padding-bottom: 10px; 
 
} 
 
.item:last-child>div { 
 
    padding-bottom: 0; 
 
} 
 
.item > div:nth-child(1) { 
 
    width: 100%; 
 
} 
 
.item>div:nth-child(1)>div{ 
 
    background-color: white; 
 
    padding: 10px; 
 
    height: 51px; 
 
} 
 
.item:nth-child(5) > div:nth-child(2) > div { 
 
    width: 10px; 
 
} 
 
@media screen { 
 
    .itemContainer::-webkit-scrollbar { 
 
     width: 6px; 
 
     border-radius: 2px; 
 
    } 
 
    .itemContainer::-webkit-scrollbar-thumb { 
 
     border-radius: 2px; 
 
     background-color: black; 
 
     border: solid red 10px; 
 
    } 
 
    .itemContainer::-webkit-scrollbar-track { 
 
     margin-top: 10px; 
 
     background-color: yellow; 
 
     width: 6px; 
 
    } 
 
}

<div class="dropdown"> 
 
    <div class="itemContainer"><div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
    </div></div> 
 
    </div> 
 

 
    <div class="dropdown"> 
 
    <div class="itemContainer"><div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
     <div class="item"><div><div>thing</div></div><div><div></div></div></div> 
 
    </div></div> 
 
    </div>

, 나는 테이블 레이아웃을 추가했습니다. 4 행 이상인 경우 두 번째 열의 너비는 10 픽셀로 설정됩니다.