2017-05-03 17 views
2

私は試していますが、この簡単な問題の解決策は出ていません。メインのスクロールバーで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; 
} 

に同じオーバーフロー属性を追加する必要が

+3

は_ _「スクロールするための身体のスクロールバー 『メイン』私が使いたい」の例でありますとにかく... – CBroe

+0

私はこれが達成可能であるとは思わない。内容が 'overlay' divから壊れて、ページ上にスクロールバーがあるか、' overlay' divの右側にスクロールバーが必要です。 –

+0

@CBroe、それは私の問題を残念ながら解決しません。 – mrb93

答えて

2

これは直接的には不可能であるが、それは特定の部分を覆うことによってそうに思えるすることが可能です...

html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 10vh 10vw; 
 
} 
 

 
body, .bg { 
 
    background-color: #ddd; 
 
    background-image: url('https://lorempixel.com/638/220/abstract/'); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-size: cover; 
 
} 
 

 
h1 { 
 
    margin: 0 0 1rem; 
 
} 
 

 
p { 
 
    margin: 1rem 0; 
 
} 
 
p:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
#padding-top { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 10vh; 
 
} 
 

 
#padding-bottom { 
 
    position: fixed; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100vw; 
 
    height: 10vh; 
 
} 
 

 
#content-outline { 
 
    position: fixed; 
 
    top: 10vh; 
 
    right: 10vw; 
 
    bottom: 10vh; 
 
    left: 10vw; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
 
} 
 

 
#content { 
 
    padding: 1rem; 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
}
<div id="content"> 
 
    <h1>Lorem Ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales nunc eu est semper eleifend. Sed vulputate nulla sit amet hendrerit finibus. Donec dapibus turpis eget mauris ultricies lobortis. Curabitur in est a felis lacinia facilisis eu quis tortor. Quisque eget augue luctus, tristique ligula fermentum, efficitur sapien. Aenean ut nisi risus. Sed libero ligula, venenatis vel dictum nec, suscipit a nisl. Maecenas a lacus et urna commodo aliquam. Quisque gravida maximus ipsum nec interdum. Donec nec aliquet mauris. Phasellus laoreet sit amet erat at ornare. Donec rutrum nulla libero, eget sollicitudin ligula convallis dapibus. Donec sodales, lorem lacinia rutrum tempus, mi nunc ultricies justo, non dignissim turpis diam id urna. In suscipit gravida elit quis tristique. Vivamus quis sapien vestibulum, elementum mi in, sodales quam. Donec enim elit, lacinia vitae urna a, tincidunt sagittis nunc.</p> 
 
    <p>Nullam pretium, libero non viverra suscipit, mauris elit egestas odio, eget commodo purus ipsum vel purus. Morbi eleifend libero mauris, feugiat bibendum ante pretium id. Morbi fringilla fringilla convallis. Nulla ullamcorper dui et quam pellentesque, ut finibus dolor sodales. Donec laoreet, augue ac ornare pretium, nulla est imperdiet elit, non euismod urna mi a risus. Proin id commodo neque. Aliquam scelerisque imperdiet elementum. Phasellus dignissim rhoncus nibh, sed efficitur massa aliquam id. Curabitur sit amet turpis dictum, pellentesque leo sed, congue urna. Morbi maximus volutpat neque, vitae molestie urna ornare a. Suspendisse ut tincidunt urna.</p> 
 
    <p>Proin eget nisl at lacus placerat aliquam. Curabitur tempus consectetur nulla eu malesuada. Nulla at tortor quis erat ornare ultricies. Aenean dolor erat, tempor in risus vel, fringilla sollicitudin risus. Quisque porttitor metus eget ante ullamcorper faucibus. Curabitur placerat turpis ac aliquet rhoncus. Aenean fringilla fringilla urna, a consectetur tellus aliquet non. Sed dapibus, ex vitae lacinia sodales, ex nisl pulvinar nulla, et tempus nulla tortor at tellus. Vivamus ac consequat eros. Fusce ullamcorper leo sed malesuada tincidunt. Integer ullamcorper blandit eros in scelerisque.</p> 
 
    <p>Nunc fermentum sapien orci, id feugiat lectus aliquet gravida. Sed imperdiet posuere nulla, sed aliquam est mollis at. Donec faucibus justo at velit tincidunt elementum. Quisque eget maximus nunc, eget pulvinar mi. Donec venenatis diam erat, non porttitor sem tempus ut. Donec dictum odio sed ornare pulvinar. Aliquam ac nulla velit. Ut nec magna ut nulla ornare imperdiet id ut ante. Aliquam placerat laoreet pharetra. Donec ante purus, maximus ac nisi ullamcorper, egestas vestibulum diam. In ultricies ante a nibh vestibulum, ut gravida nulla pulvinar.</p> 
 
    <p>Suspendisse purus ex, tempus a accumsan ac, gravida eu quam. Proin venenatis est quis laoreet congue. Fusce nec efficitur dolor. Vestibulum eleifend felis non ultrices pretium. Mauris auctor eget risus non luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce varius non lacus non porttitor. Integer a turpis at lacus consequat sollicitudin. Vestibulum eget mi at enim imperdiet hendrerit ut ut nibh. Aliquam placerat sodales finibus. Nulla porttitor dolor sed nisi tincidunt vehicula a sit amet ligula. Aenean turpis ex, tempor sed urna et, tristique pretium velit. Mauris est risus, porta id dui a, tristique hendrerit odio. Sed ultricies consectetur gravida. Aenean vestibulum elit venenatis, condimentum sapien at, consectetur augue.</p> 
 
</div> 
 
<div id="padding-top" class="bg"></div> 
 
<div id="padding-bottom" class="bg"></div> 
 
<div id="content-outline"></div>

+0

ありがとう、これは良いアドバイスです。残念ながら、それは私が探しているものではありません。私がやっていることは基本的には、下のレイヤー(例えば、全幅の画像)にフルページ、固定、全体の背景があり、この背景レイヤの上にコンテンツをホストするdivがあり、ブラウザのデフォルトのスクロールバーをスクロールできます。しかし、私はいくつかのウェブサイトでこの効果を見たことがあると私は誓うことができますが、それはunachievableのように見えます。 – mrb93

+0

@ mrb93バックグラウンドイメージを含むように私の答えを更新しました。これはあなたが探しているものですか? –

+0

私の男!これは可能な限り最良の方法でハッキーです。ちょうど私が欲しかったのと同じように機能 – mrb93

1

は、あなたが本当にコンテナのオーバーフローを必要としない、あなただけの親にそれを必要としますこの場合に溢れされる要素のp

+0

ありがとう、残念ながら、私が避けようとしている.overlay divの右側にスクロールバーがあります。私はブラウザのデフォルトのスクロールバーをスクロールに使用したいと思います。 – mrb93

0

あなたは、固定ヘッダーとフッターでそれを行うことができ似た何かを達成しようとします。体のために隠されたという点で、非生産的である:あなたがオーバーフローを設定することを認識すべきである - ここで

#header { 
    background-color:red; 
    width:100vw; 
    height:20px; 
    position:fixed; 
    top:0; 
} 

#footer { 
    background-color:red; 
    width:100vw; 
    height:20px; 
    position:fixed; 
    bottom:0; 
} 

https://jsfiddle.net/10mh3tue/

関連する問題