Home >Web Front-end >HTML Tutorial >Set DIV to scroll as the scroll bar scrolls_html/css_WEB-ITnose
Set DIV to scroll as the scroll bar scrolls_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:511092browse
I haven’t touched the web side for a while. I recently made a function. I need to make a DIV that scrolls with the scroll bar. Mark it:
Source code:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>div随滚动条滚动而滚动</title> 6 <style type="text/css"> 7 #divContainer{width:1200px;height:1800px;border:1px solid #0000FF;margin:0px auto;} 8 /* 9 设置div固定显示在屏幕位置时，定位计算公式：10 11 left:50% + margin-left:±（页面内容部分宽度+div宽度+间隔像素）12 */13 #divMain{width:500px;height:400px;margin:0px auto;position:fixed;top:50%;left:50%;border:1px solid #ff0000;text-align:center;line-height:400px;margin:-200px 0px 0px -350px;}14 </style>15 </head>16 17 <body>18 <div id="divContainer">19 <div id="divMain">20 <span>div随滚动条滚动而滚动</span>21 </div>22 </div>23 </body>24 </html>
Preview effect:
This function is implemented using CSS, and the same function can also be achieved using jQuery.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Article tag_html/css_WEB-ITnoseNext article：Article tag_html/css_WEB-ITnose