「固定」要素をスクロール可能にする方法

StackOverflow https://stackoverflow.com/questions/9383906

質問

私はこれがやや直感に反するように聞こえることを知っていますが、私がやろうとしていることを説明させてください。

背景として機能する大きな要素があります。サイズはしません。多くの場合、表示されている画面よりも大きくなります。この要素のコンテンツのほとんど（単なる画像です）は、中心の近くにあります。必要な唯一の情報は800pxの真ん中であり、全体が幅1600pxであるとしましょう。

なぜそれは必要以上に広いのですか？それは背景の残りの部分に喜んでフェードし、サイトのデザインに追加されるからです。

そこで、私はその要素を固定し、それを中心に標準的なトリックを使用しました。大きなモニターで完全に機能します。それは中心にとどまりますが、その一部が少し大きすぎる場合、基本的に何もないものを確認するためにスクロールすることはできません。私はすきです。

しかし、画面が小さすぎる場合、すべてを見ることができません。スクロールに行くと、背景画像が固定されているため、背景画像が所定の位置にとどまるため、ページの最小または最小値を設定することはできません。

画像の必要な要素のサイズまでの最小幅を指定できるため、ページがスクロールされたときに、固定要素が実際に他のすべてと一緒に移動する方法が実際に動きました。それは非常にうまくいくでしょう。

それ以外の場合、別の解決策は、スクロールして全体を見ることができる他の形式のポジショニングを使用することです。繰り返しになりますが、最小幅で全体を設定することができました。これにより、コンテンツのどれだけがスクロール可能かを正確に設定できます。

これは可能ですか？簡単なものが足りないように感じます。理想的には、画像のサイズを変更したり、複数のCSSシートを提供したり、精巧なJavaScriptなどを使用する必要はありません。助けてくれてありがとう！

役に立ちましたか？

解決

私はついに大量の実験の後にこの問題を解決しました、そして、解決策は基本的なCSSであることが判明しました。これは素晴らしいことです。

このソリューションを説明する詳細を説明します 私のブログで. 。または、ここにあります 作業デモ.

HTML

<body>
 <div id="box">
  <div id="element"></div>
 </div>
</body>

CSS

<style type="text/css">
html, body {
 height:100%;
}
body {
 margin:0px;
 padding:0px;
 min-width:1000px; /*Set the width you want to be able to scroll to here*/
}
#element {
 height:100%;
 position:relative; /*This section centers your element*/
 left:50%;
 margin-left:-800px; /*Half the width of the image*/
 z-index:-9999; /*This part puts it behind everything, not needed if you aren't making a background*/
 background:url(image.jpg) no-repeat;
}
#box {
 height:100%;
 min-height:700px; /*Set the height you want to be able to scroll to here*/
 overflow:hidden; /*Needed due to centering with margins*/
}
</style>

他のヒント

私はあなたが精巧なJavaScriptを使用したくないことを知っています.... JQuery Libraryは、最小限のコードでこのようなことをいくつかの素晴らしい修正を可能にします...あなたはjQueryのない比較的小さなスニペットを使用することもできます...基本的にすべてあなたがする必要があります。Windol.Scrollのイベントリスナーを設定して、sixedelement.scrolltopを一致させます...

クイックjQueryの例：

$(window).scroll(function(){
  $('#fixedBackground')[0].scrollTop=$(window).scrollTop();
});

私はあなたが何をしたいのかを正確に知っているとは確信していませんが、CSSの以下のスニペットがあなたを助けるかもしれません。わからない。

 body{ background-image:url(../images/bgImage.png); 
 background-attachment:scroll; background-position:center top;
 background-repeat:no-repeat; margin-top:0px; margin-bottom:0px;}

そのスニペットと background-attachment スクロール可能な理由です。

あなたが現在持っているもののためにあなたのCSSを投稿した場合、それは役立つでしょう、私たちが本当にあなたを助けることができます。もっと明確にできるかどうか教えてください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top