私は試していますが、この簡単な問題の解決策は出ていません。メインのスクロールバーで1つのdivのコンテンツしかスクロールしない
基本的には、私のコンテンツをホストしている縦と横の中央の矩形のdivで固定されたボディを持つことです。ボディーはスクロールしませんが、divの内容はすべきです。
言い換えれば、基本的には、下のレイヤー(例:全幅イメージ)の全面、この背景レイヤーの上に自分のコンテンツをホストするdiv、独立してスクロールすることです。
私は私のコードを持っていることは基本的に3つのネストされた層である:
1)本体(オーバーフロー:隠された)、2)の全幅透明容器(オーバーフロー-Y:スクロール)および3)中心DIVそれは私のすべてのコンテンツ(ポジション:絶対)をホストすることになっています。
問題は、何もスクロールしません。オーバーフローy:scrollまたはautoを中心divに追加しようとすると、醜いスクロールバーが右に表示され、それが私の望むものではありません。スクロールに「メイン」ボディスクロールバーを使用したいと思います。
html, body {
margin: 0;
background-color: lightgray;
overflow: hidden;
}
.container {
overflow-y: scroll;
width: 100%;
height: 100vh;
background-color: red;
}
.overlay {
position: absolute;
width: 90%;
height: 90vh;
background-color: lightgrey;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 60px -2px rgba(0, 0, 0, 0.75);
z-index: 10;
}
<section class="container">
<div class="overlay">
<h1>Lorem Ipsum </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate
arcu sit amet quam malesuada, maximus ornare quam facilisis. Fusce eu lectus
sapien. Nunc condimentum, neque ut porta tincidunt, sem mi hendrerit nisi,
eget blandit elit diam nec
enim. Vivamus imperdiet nisi auctor nisl auctor, at aliquam lectus luctus.
Mauris non sem tortor. Nulla facilisi. Duis pharetra commodo tempor. Fusce
luctus posuere fringilla. Morbi molestie tortor quis lectus sodales
vulputate. Aenean pharetra interdum tellus, nec congue nisi venenatis eu.
Cras eget metus et sapien aliquam dictum eget eu massa.</p>
</p>
</div>
</section>
ここでは、私がつもりかを見ることができますフィドルです:
https://jsfiddle.net/ohmlg/29mL6tnv/
私が欲しいもの:
1)のdivの内容を持っています私がスクロールするときにdivの中に留まる(今、オーバーフロー:身体の隠れた性質がthの一部を切り捨てている2つ目のスクロールバーを使用してdiv内のコンテンツをスクロールしてください。 2)div内のコンテンツをスクロールするためにメインスクロールバーを使用します。
なぜなら、私は2つの背景を持っているからです.1つは最下層(bodyまたは.container)に、もう1つは "content div"にあります。あなたが欲しいものに応じて、オーバーレイ要素
.overlay {
overflow-y: scroll;
}
に同じオーバーフロー属性を追加する必要が
は_ _「スクロールするための身体のスクロールバー 『メイン』私が使いたい」の例でありますとにかく... – CBroe
私はこれが達成可能であるとは思わない。内容が 'overlay' divから壊れて、ページ上にスクロールバーがあるか、' overlay' divの右側にスクロールバーが必要です。 –
@CBroe、それは私の問題を残念ながら解決しません。 – mrb93