スクロールバーの位置を設定する

私のウェブサイトには、2つのメインdivsがあります.1つは上部のバナー用、もう1つはメインコンテンツです。彼らはimgs,iframesなどの内部要素を含んでいますが、これは私の問題にとって重要ではないと思います。どのようにしてメインコンテンツのスクロールバーをバナーと重ならないようにできますか？スクロールバーの位置を設定する

actual websiteの送信元をmy githubに表示することができます。ここSO上のスニペットでは、見えにくいかもしれ

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(15);

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#header { 
 
    position: fixed; 
 
    background-color: teal; 
 
    z-index: 1; 
 
    top: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
#main { 
 
    postion: absolute; 
 
    top: 100px; 
 
}

<body> 
 

 
<div id="header"> 
 
header 
 
</div> 
 

 
<div id="main"> 
 
<pre id="someText"></pre> 
 
</div> 
 

 
</body>

しかしscroll bar：しかし、時間探しを無駄に保存するために、私はこの問題を示していhtmlの小さなスニペットを書いてきました右側にバナーが重なっていて、バナーに達すると止まるのが私の望むものです。

私はこれが scroll barバナーを重ねているが、これはちょうどので、私はスクロールすることはできませんそれを完全に削除するよう hiddenに身体の overflowを設定する（ CSSで）試してみました

- それほど明確ではない、私は探していますどのような...

私もmaindivのoverflow-yscrollに設定しようとしているが、これは私がそれをしたい場所に表示されないbarとして動作しませんが、それはそう使用できませんgrayed-outです。

出典

2017-08-25 Joe Iddon

私はあなたのためのフィドルを作成しました： https://jsfiddle.net/3gvowvag/1/

あなたのHTMLとJSは同じまま。あなたのCSSの場合：

html, body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
} 

#header { 
    position: fixed; 
    background-color: teal; 
    z-index: 1; 
    top: 0; 
    height: 100px; 
    width: 100%; 
} 

#main { 
    position: absolute; 
    top: 100px; 
    max-height: 100%; 
    width: 100% 
    overflow-y: scroll; 
}

ので、変更が与えることを基本的にあなたのhtml, bodyoverflow-y: hiddenとmax-heightあなた#mainと100%などoverflow-y: scrollのwidth。

これは基本的にあなたが望むものですが、そのようなページを設定することは100％自信がありません。ピクセルを使った絶対的な位置付けとオフセットはちょっと古いものです。また、html/bodyのためにoverflow-yを隠すように設定していますが、長期的にどのように振る舞うかは正確には分かりません。しかし、それ以上の文脈なしでこれを完全に考えるのはかなり難しい。

P .: awesome cat！

出典

2017-08-25 10:42:03

overflow-y: hidden;を本文に追加するだけで（previous answerをご覧ください）、overflow-y: scroll;を#main divに適用するだけです。

document.getElementById("someText").innerText = "this is some content ".replace(/ /g, '\n').repeat(30);

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    overflow-y: hidden; 
 
} 
 

 
#header { 
 
    position: fixed; 
 
    background-color: teal; 
 
    z-index: 1; 
 
    top: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
#main { 
 
    postion: absolute; 
 
    top: 100px; 
 
    overflow-y: scroll; 
 
}

<body> 
 

 
<div id="header"> 
 
header 
 
</div> 
 

 
<div id="main"> 
 
<pre id="someText"></pre> 
 
</div> 
 

 
</body>

出典

2017-08-25 10:47:01 Tedds

を表示したくない場合は、私はすでにそれを試していたし、そうでない見ることができますコードスニペットを実行すると、スクロールバーが「グレイアウトされている」ことがわかります。 –

奇妙なこと...私は[別のコンテキスト]（https://codepen.io/rogersegu/pen/f68a745bd50b8f6fb964a48fedc70f5b）で試してみました。私は、stackoverflowコードのスニペットアプリケーションは、それを正しくレンダリングされていないと推定、私は別の説明を見つけることができませんでした。たぶん私は何かが明らかに欠けている...あなたが把握すれば私に知らせてください。乾杯！ – Tedds

上記のようにkonradを解決した場合は、メインdivの高さを設定して**オーバーフローさせる必要があります。 –

あなたはフレキシボックスのレイアウトと、これは簡単に見つけるかもしれません。このようなものかもしれない。例としてautoにオーバーフローを設定し、あなたがた場合は私の質問の下を再読み込みグレー表示のスクロールバー

<div class="wrapper"> 
    <div class="header"> 
     header 
    </div> 
    <div class="content"> 
     content 
     content 
     content 
    </div> 
</div> 

.wrapper{ 
    display:flex; 
    flex-direction:column; 
    background:blue; 
    height: 100vw; 
} 

.header{ 
     height:100px; 
     background-color:pink 
    } 

    .content{ 
     background:green; 
     flex-grow: 1; 
     overflow:scroll; 
    }

出典

2017-08-25 11:25:15 iSZ

スクロールバーの位置を設定する

答えて

関連する問題