2016-08-16 2 views
-1

스크롤 막대를 사용하여 CSS 높이기 -y : 스크롤을 사용하여 특정 높이의 div 텍스트에 사용자 정의 스크롤바를 추가 할 수 있습니다. 그것은 텍스트가 div 높이보다 길 때 좋지만 텍스트가 더 짧을 때 사용자 정의 스크롤바를 표시 할 필요가 없을 때 어쨌든 그것을 숨길 수 있습니까? 탭에 적용하기 때문에 tab1 적은 텍스트는 표시하지 않고 tab2는 많은 텍스트를 스크롤하여 표시해야합니다. overflow-y : hidden을 사용할 수 없습니다. 왜냐하면 모든 탭과 반응 모드에 적용되지 않기 때문입니다.스크롤 막대가 작동하지 않을 때 스크롤 막대를 닫습니다.

 <div class="tab"> 
      <div class="tab1"> 
       <div class="tab-text"> only few text </div> 
      </div> 
      <div class="tab2"> 
       <div class="tab-text"> 
        a lot of text here 
        a lot of text here 
        have to scroll..... 
       </div> 
      </div> 
     </div> 

CSS : enter image description here

HTML은 다음과 같은 : 여기 사진입니다

 .tab-text{  
     overflow-y: scroll !important; 
     overflow-x: hidden; 
     padding: 30px; 
     height: 230px; 
     } 
     .tab-text::-webkit-scrollbar, { 
     width: 7px; 
     } 
     .tab-text::-webkit-scrollbar-thumb { 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     background: rgba(223,207,183,0.8); 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
     } 

답변

3

시도 auto

.tab-text{  
     overflow-y: auto !important; 
     overflow-x: hidden; 
     padding: 30px; 
     height: 230px; 
     } 
+0

매우 간단 overflow-y에 있지만 난 몰라 알아, 고마워. – pexichdu

관련 문제