質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

_shizu
_shizu

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

9閲覧

投稿2019/03/16 18:36

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

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

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

▼現状
イメージ説明

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

html

<div id="tab"> <div class="container"> <div class="tab"> <ul class="tab_menu"> <li class="tab_menu_item"><a href="#" class="tab_menu_item_link is-active" data-id="about">ABOUT</a></li> <li class="tab_menu_item"><a href="#" class="tab_menu_item_link" data-id="works">WORKS</a></li> <li class="tab_menu_item"><a href="#" class="tab_menu_item_link" data-id="contact">CONTACT</a></li> </ul> <div class="tab_container"> <div class="tab_content is-active" id="about"> <p>About About About</p> </div> <div class="tab_content" id="works"> <p>Works Works Works</p> </div> <div class="tab_content" id="contact"> <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> </div> </div> </div> </div> </div>

css

#tab { margin: 50px auto; width: 400px; } .tab_menu { width: 100%; display: flex; margin: 0; padding: 0; } .tab_menu_item { margin-right: 2px; text-align: center; list-style: none; } .tab_menu_item:last-child { margin-right: 0; } .tab_menu .tab_menu_item a { display: block; width: 100px; padding: 10px; background: #fff; border-radius: 5px 5px 0 0; border: 1px solid #888; border-bottom: none; box-sizing: border-box; color: #888888; transition: .3s; text-decoration: none; } .tab_menu .tab_menu_item a:hover, .tab_menu .tab_menu_item a.is-active { background: #888; color: #ffffff; } .tab_container { border: 1px solid #888; height: 168px; overflow-y: scroll; } .tab_content { padding: 20px; display: none; } .tab_content.is-active { display: block; animation: fade 0.5s ease; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } }

javascript

var tabMenus, tabContents; tabMenus = document.querySelectorAll('.tab_menu_item_link'); tabContents = document.querySelectorAll('.tab_content'); for (var i = 0; i < tabMenus.length; i++) { tabMenus[i].addEventListener('click', function(e) { e.preventDefault(); for (var i = 0; i < tabMenus.length; i++) { tabMenus[i].className = 'tab_menu_item_link'; } this.className = 'tab_menu_item_link is-active'; for (var i = 0; i < tabContents.length; i++) { tabContents[i].className = 'tab_content'; } document.getElementById(this.dataset.id).className = 'tab_content is-active'; }); }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。