html
ブラウザのスクロール バーがどのように引かれても (スクロール ホイールがどのように回転されても)、Web ページ ウィンドウ内の画像が常にブラウザ ウィンドウの中央に表示されるように設定する方法ポジショニングが苦手ですか？
次のコードを試してください:
<!DOCTYPE html><html><head><title>模拟position:fixed</title></head><style>* { padding:0; margin:0;}body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}html { height:100%; overflow:hidden;}.fixed { position:absolute; left:50%; margin-left:-100px; top:50%; margin-top:-100px; width:200px;height:200px; background:#fc0;}.wrapper { height:100%;overflow:auto; overflow-y:scroll;}#content { width:90%; margin:0 auto; background:#f2f2f2; padding:20px;}</style><body><img class="fixed" src="http://avatar.csdn.net/D/E/E/1_shn11160.jpg" alt="shn11160"/><div class="wrapper"> <div id="content"></div></div><script> var str=''; for(i=0;i<100;i++){ str+= i + "<br />"; } document.getElementById('content').innerHTML=str;</script></body></html>しかし、マウス ホイールを回すと位置はどのように変化するでしょうか?
申し訳ありません、私の説明は間違っていました。
私が達成したい効果は、マウス ホイールがスクロールすると、画像がスクロール バーと一緒にスライドする効果を持つことです
スクロールの効果は何ですか?点滅しているのに同じ位置に留まりますか?
常にブラウザの中央に位置し、画面解像度を取得し、画像を中央に設定してから、位置を固定します。
私の意見では、この効果を実現するにはいくつかの方法があります (主にブラウザのサポートに依存します)
最良の方法は、最初に中央揃えにしてから、位置指定を使用することです: CSS 位置: 固定
ブラウザがサポートしていない場合まず JavaScript を使用してそれを見つけてから、ドロップダウン バーのアクションを監視します
画像を背景画像として設定し、次に、background-attachment 属性を fix に設定します。 コードは次のとおりです。
<html> <head> <style type="text/css"> body{ background-image:url("testImg/3.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: 200px; background-position: center; background-color: #acacac; } div{ height: 200%; } </style> </head> <body> <div></div> </body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
