タブで、テキストが短くスクロールする必要がないときはスクロールバーを消したい

閲覧ありがとうございます。

JSで切り替えるタブで、テキストが短くスクロールする必要がないときはスクロールバーを消したいです。
現状としては、overflow-y: scroll;を指定しており、テキストの量に関係なく常にスクロールバーが表示されている状態です。

何か良い方法がございましたら、お手数ですがお教え頂けますと幸いです。
よろしくお願い致します。

▼現状

▼CodePen
https://codepen.io/0166/pen/VRxzxW

html
1<div id="tab">
2  <div class="container">
3    <div class="tab">
4      <ul class="tab_menu">
5        <li class="tab_menu_item"><a href="#" class="tab_menu_item_link is-active" data-id="about">ABOUT</a></li>
6        <li class="tab_menu_item"><a href="#" class="tab_menu_item_link" data-id="works">WORKS</a></li>
7        <li class="tab_menu_item"><a href="#" class="tab_menu_item_link" data-id="contact">CONTACT</a></li>
8      </ul>
9      <div class="tab_container">
10        <div class="tab_content is-active" id="about">
11          <p>About About About</p>
12        </div>
13        <div class="tab_content" id="works">
14          <p>Works Works Works</p>
15        </div>
16        <div class="tab_content" id="contact">
17          <p>Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact</p>
18        </div>
19      </div>
20    </div>
21  </div>
22</div>

css
1#tab {
2  margin: 50px auto;
3  width: 400px;
4}
5.tab_menu {
6  width: 100%;
7  display: flex;
8  margin: 0;
9  padding: 0;
10}
11.tab_menu_item {
12  margin-right: 2px;
13  text-align: center;
14  list-style: none;
15}
16.tab_menu_item:last-child {
17  margin-right: 0;
18}
19.tab_menu .tab_menu_item a {
20  display: block;
21  width: 100px;
22  padding: 10px;
23  background: #fff;
24  border-radius: 5px 5px 0 0;
25  border: 1px solid #888;
26  border-bottom: none;
27  box-sizing: border-box;
28  color: #888888;
29  transition: .3s;
30  text-decoration: none;
31}
32.tab_menu .tab_menu_item a:hover,
33.tab_menu .tab_menu_item a.is-active {
34  background: #888;
35  color: #ffffff;
36}
37.tab_container {
38  border: 1px solid #888;
39  height: 168px;
40  overflow-y: scroll;
41}
42.tab_content {
43  padding: 20px;
44  display: none;
45}
46.tab_content.is-active {
47  display: block;
48  animation: fade 0.5s ease;
49}
50@keyframes fade {
51  from {
52    opacity: 0;
53  }
54  to {
55    opacity: 1;
56  }
57}

javascript
1var tabMenus,
2    tabContents;
3tabMenus = document.querySelectorAll('.tab_menu_item_link');
4tabContents = document.querySelectorAll('.tab_content');
5for (var i = 0; i < tabMenus.length; i++) {
6  tabMenus[i].addEventListener('click', function(e) {
7    e.preventDefault();
8
9    for (var i = 0; i < tabMenus.length; i++) {
10      tabMenus[i].className = 'tab_menu_item_link';
11    }
12    this.className = 'tab_menu_item_link is-active';
13    for (var i = 0; i < tabContents.length; i++) {
14      tabContents[i].className = 'tab_content';
15    }
16    document.getElementById(this.dataset.id).className = 'tab_content is-active';
17  });
18}

行動規範の内容に同意します

回答1件

ベストアンサー

overflow-y: auto; でどうでしょう。

js
1.tab_container {
2  border: 1px solid #888;
3  height: 168px;
4  /*overflow-y: scroll;*/
5  overflow-y: auto;
6}
7```**動くサンプル：**[https://jsfiddle.net/rj6uLpdz/](https://jsfiddle.net/rj6uLpdz/)