オーバーフローの仕方：sticky divのスクロール

WordPressテーマを作成していますが、スクロールオーバーフローのスクロールメニューを作成したいと思います。何が起こるかは、私がそれをやろうとしているときに働いていないか、コンテンツを隠していることです。オーバーフローの仕方：sticky divのスクロール

以下、コードを掲載します。

HTML：

.container 
 
{ 
 
\t height:100vh; 
 
\t 
 
\t 
 
} 
 

 
body 
 
{ 
 
\t background-color:grey; 
 
\t 
 
} 
 

 
#navmenu 
 
{ 
 
\t position:sticky; 
 
\t height:70px; 
 
\t text-align:center; 
 
\t overflow:scroll; 
 
\t border-top:1px solid white; \t 
 
} 
 

 
#navmenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
\t text-align:center; 
 
\t min-width:100%; 
 
\t 
 
\t 
 
} 
 

 
#navmenu li { 
 
    float: left; 
 
\t font-size:14px; 
 
\t text-align:center; 
 
\t 
 
\t 
 
\t 
 
} 
 

 
#navmenu li a { 
 
    display: inline-block; 
 
    /*color: white;*/ 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
\t 
 
} 
 

 
#navmenu li a:hover 
 
{ 
 
\t background-color:#111; 
 
} 
 

 

 

 
.logo 
 
{ 
 
\t height:50px; 
 
\t float:left; 
 
}

<html> 
 

 
<head> 
 
\t <link rel="stylesheet" type="text/css" href="about.css"> 
 
\t 
 
</head> 
 

 

 

 
<body> 
 
\t 
 
<div class="container"> 
 
<div id="logo"></div> 
 

 
<div id="navmenu"> 
 
\t 
 
\t <ul> 
 
\t \t <li><img style="height:70px" src="img/logo.png"></li> 
 
\t \t <li><a href="#">OPTION</a></li> 
 
\t \t <li><a href="#">OPTION <br>OPTION</a></li> 
 
\t \t <li><a href="#">OPTION <br>OPTION</a></li> 
 
\t \t <li><a href="#">OPTION <br>OPTION</a></li> 
 
\t \t <li><a href="#">OPTION</a></li> 
 
\t \t <li><a href="#">OPTION OPTION <br>OPTION</a></li> 
 
\t \t <li><a href="#">OPTION</a></li> 
 
\t \t <li><a href="#">OPTION <br>OPTION</a></li> 
 
\t \t <li><a href="#">OPTION</a></li> 
 
\t </ul> 
 
\t 
 
\t 
 
\t 
 
</div> 
 

 

 

 
</div> 
 
</body> 
 

 
</html>

出典

2017-01-11 Pat

デモのメニューがスクロールします..？メニューを他のページと一緒に移動しますか？ – sol

オーバーフローの目的は何ですか？scroll;ここに？。ひどく見える。位置：stickyは実験的なCSSを許可すればffとchromeでしか動作しません –

何が起こったとしてもメニューを1行にしておくことを意味します。応答性の高いものとして作成できますが、どちらもうまくいきません。メニューは水平方向にスクロールしていません。 – Pat

質問の著者は、彼らはページ全体が水平方向にスクロールしたいこと（コメントを参照）だけでなく、ナビゲーションバーを明らかにしました。

ここJSFiddleソリューションです：jsfiddle.net/qwjshv9s/1

このソリューションには2つの部分があります。

ボディスクロール以外のものを放置しないでください。

overflow:scrollのすべての性質を取り除き、overflow-x:autoを身体自体に置きます。

メニューの折り返しを許可しないでください。

<ul>にwhitespace:nowrapを適用しdisplay:inline-blockにfloat:leftから<li>スイッチ素子。

- ところで

、唯一水平をスクロールできるように、あなたが使用することができます。

overflow-x: scroll;

これは、X軸上にスクロールできます。スクロールバーが常に表示されないようにするには、

overflow-x: auto;

を入力し、必要なときにのみスクロールします。

出典

2017-01-11 19:35:37

答えてくれてありがとう、私はそれを試してみましたが残念ながら私はスクロールバーを表示する代わりにウィンドウを小さくするように私のコンテンツを隠します。 – Pat

両方のソリューションは基本的に同じですが、スクロールバーを作成する代わりにコンテンツを隠すだけです。その理由は何でしょうか？ – Pat

スクロールバーを目に見えるようにすることを尋ねていますか？多くのブラウザは、アクティブに使用されていないときにスクロールバーを視覚的に非表示にします。それが_visible_であることを確かめたいならば（それだけでなく技術的に）、それはまったく別の問題です。 –

定義された幅と追加のdivの中にあなたのNAVを包みます。参照してくださいスニペット：

.container { 
 
    height: 100vh; 
 
} 
 
body { 
 
    background-color: grey; 
 
} 
 
#navmenu { 
 
    position: sticky; 
 
    height: 70px; 
 
    text-align: center; 
 
    overflow: scroll; 
 
    border-top: 1px solid white; 
 
} 
 

 
#nav-inner { 
 
    width: 10000px; 
 
} 
 
#navmenu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    min-width: 100%; 
 
} 
 
#navmenu li { 
 
    float: left; 
 
    font-size: 14px; 
 
    text-align: center; 
 
} 
 
#navmenu li a { 
 
    display: inline-block; 
 
    /*color: white;*/ 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
#navmenu li a:hover { 
 
    background-color: #111; 
 
} 
 
.logo { 
 
    height: 50px; 
 
    float: left; 
 
}

<div class="container"> 
 
    <div id="logo"></div> 
 

 
    <div id="navmenu"> 
 
    <div id="nav-inner"> 
 
     <ul> 
 
     <li> 
 
      <img style="height:70px" src="img/logo.png"> 
 
     </li> 
 
     <li><a href="#">OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION <br>OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION <br>OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION <br>OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION OPTION <br>OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION <br>OPTION</a> 
 
     </li> 
 
     <li><a href="#">OPTION</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 

 
    </div> 
 

 

 

 
</div>

出典

2017-01-11 19:22:55 sol

まだWordPressのテーマとしてはうまくいくのでしょうか？私はWordPressがそれをメニューとして認識しますか？ – Pat

私は正直ではありませんが、いくつかのテストを行う必要があります。私はあなたが望むものを達成するためにCSSを使って別の方法を知らない、申し訳ありません！ – sol

それは大丈夫です、ありがとうございます。しかし、あなたに正直なところ、私はその解決策にいくつか問題があります。 "Run code snippet"では完璧に動作しますが、実際のコードエディタで試してみると、実際には動作しません。それは何でしょうか？ – Pat

オーバーフローの仕方：sticky divのスクロール

答えて

関連する問題