html - 滚动条不工作时隐藏

Question

我使用 css overflow-y: scroll，将自定义滚动条添加到我的具有特定高度的 div 文本。当文本长于 div 高度时效果很好，但是当文本较短时我不需要显示自定义滚动条，是否有隐藏它的方法？ 因为我申请了一个标签所以 tab1 少了文本不想显示它，tab2 很多文本应该显示滚动。 我不能使用 overflow-y:hidden 因为它不适用于所有选项卡和响应模式。 这是图片:

html 看起来像这样:

        <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:

      .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);
      }

Answer 1

尝试overflow-y auto

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