0
スクロールバーなしでナビゲーションスクロールを動作させることができません。CSS - 非表示のスクロールバー付きのスクロール可能なdiv
多くの例が見つかりましたが、動作しません。
私は疲れた親クラスoverflow：hidden; overflow-yを持つ子クラス：auto;
私のCSSでは何が間違っているのですか？
...................................... .............................ここ
は抜粋です：
html, body {
\t \t background-color: #111111;
\t \t width: 100%;
\t \t height: 100%;
\t \t padding: 0;
\t \t margin: 0;
\t \t color: #fff;
\t \t font : 12px Arial,Courier New,Tahoma;
}
.layoutWrapper {
\t \t width: 100%;
\t \t height: 100%;
\t \t display: flex;
\t \t \t
}
.layoutHead {
\t \t width: 100%;
\t \t height: 200px;
\t \t background-color: #171616;
\t \t color: #444;
\t \t line-height: 200px;
\t \t font-size: 100px;
\t \t text-align: center;
}
.layoutNav {
\t \t background-color: #333333;
\t \t width: 250px;
\t \t height: 100%;
\t \t overflow: hidden;
}
.layoutNavWrapper {
\t \t width: 250px;
\t \t height: 100%;
\t \t overflow-y: scroll;
}
.layoutNavWrapper ul {
\t \t width: 240px;
\t \t padding: 0;
\t \t margin: 0 0 0 5px;
}
.layoutNavWrapper ul li {
\t \t width: 240px;
\t \t height: 40px;
\t \t line-height: 40px;
\t \t margin: 5px 0 0 0;
\t \t list-style-type: none;
}
.layoutNavWrapper ul li a {
\t \t color: #e8ecf3;
\t \t background: #212020 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWMICAhoYCAK4FQJAH+kAuF/Y9FHAAAAAElFTkSuQmCC) repeat;
\t \t text-decoration: none;
\t \t display: block;
\t \t width: 220px;
\t \t height: 40px; \t
\t \t padding-left: 20px;
}
.layoutNavWrapper ul li a:hover {
\t \t background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWPIzc31ZSAK4FQJAI0YAylSFqZ7AAAAAElFTkSuQmCC) repeat;
\t \t -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
\t \t -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
\t \t box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.08);
}
.layoutContent {
\t \t display: inline-block;
\t \t width: calc(100% - 250px);
\t \t height: 100%; \t \t
}\t <div class="layoutWrapper">
\t
\t \t <div class="layoutNav">
\t \t \t <div class="layoutNavWrapper">
\t \t \t \t <ul>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Startseite</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Mein Profil</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Profil bearbeiten</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="">Platzhalter</a>
\t \t \t \t \t </li> \t \t \t \t \t
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
\t \t <div class="layoutContent">
\t \t \t <div class="layoutHead">
\t \t \t \t >_ Keyboard Hobby
\t \t \t </div>
\t \t </div>
\t </div>
\t
\t
取り除こうとしているスクロールバーはありますか？ – GoofBall101
私の左のナビゲーションにはスクロールバーがあります。スカルバーなしでスクロールすることができます。 –
ここに例があります：https://codepen.io/JonAnderDev/pen/XJNOPr、この方法ですべてのブラウザで動作します –