Home >Web Front-end >HTML Tutorial >Could you please tell me how to set it up so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)_html/css_WEB-ITnose
Could you please tell me how to set it up so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:20:021672browse
html
How to set it so that a picture in the web page window is always in the center of the browser window, no matter how the browser scroll bar is pulled (and no matter how the scroll wheel is rolled)Reply to discussion (solution)
Absolute positioning doesn’t work?
Try the following code:
<!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 lazy" src="/static/imghwm/default1.png" data-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> But how does the position change when rolling the mouse wheel?
Sorry, my description was wrong.
The effect I want to achieve is that as the mouse wheel scrolls, the picture will have the effect of sliding with the scroll bar
What is the effect of scrolling? Flashing but staying in the same position?
Keep it in the center of the browser, get the screen resolution, set the image in the center, and then position: fixed.
In my opinion, there are several ways to achieve this effect (mainly depends on browser support)
The best way is to center-align it first, and then use positioning: CSS position: fixed;
If the browser does not support it, use javascript to locate it first, and then monitor the drop-down bar action
Set the image as the background image, and then set the background-attachment attribute to fixed. The code is as follows:
<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>