亚洲城ca88唯一官方网站js总计成分间距顶上部分

时间:2020-03-13 17:18来源:亚洲城ca88唯一官方网站
时光: 2019-12-31观望: 76标签:滚动前言:近来在职业中境遇,文字在大屏中,现身尾巴部分有留白招致不总是的现象,很离奇,故写那篇小说细究其原因 前言 在本人建站的进度中,要兑现

时光: 2019-12-31观望: 76标签: 滚动前言:近来在职业中境遇,文字在大屏中,现身尾巴部分有留白招致不总是的现象,很离奇,故写那篇小说细究其原因

前言

  在本人建站的进度中,要兑现三个div随滚动条浮动的作用,网络找了些示例不太好用,还是要好入手,海晏河澄,写的倒霉请大家谅解,毕竟本身不是搞前端的,因为自身建站究竟每一步都不得不团结来,那边只是做个记录。

前言:

  在事情当中,咱们平时要计算成分的分寸和因素在页面包车型大巴地点音信。举个例子说,在二个滚动区域内,笔者要领会成分A是在可视区内,还是在掩没内容区(滚动到异乡看不到了)。一时还要更进一层驾驭,成分是整套都显得在可视区,依然有局地在可视区部分在隐瞒内容区。偶然还要进一层精晓,在隐身内容区的这有个别是占多大的分寸。so,来聊聊怎样获得成分的尺寸和地方消息。

 

关键字:offsetTop scrollTop offsetHeight

position:fixed

  达成转移重要有个css属性:position:fixed,从单词上就精晓是恒久的意趣,那边就用自己博客的文告栏做个示范:

亚洲城ca88唯一官方网站 1

 

  上面是从腾讯网中复制下来的代码,放到本地本人调整,当然大家能够见见好的页面或许效果,能够搞下去切磋。下面的效应能够见到样式中加了个position:fixed;属性,通告栏不随着滚动条的滚动而调换地点,其实那一个功用也得以满意一些必要。这一个暗中认可固定在左上部,我们必要牢固在右上部加个right:10px;属性就可以:

亚洲城ca88唯一官方网站 2

  大家看看一些网址上边的导航条随着滚动条固定在最上部,正是这种形式完毕,对于不搞前端的来讲可能以为很难,其实就那样简单。

不要高估外人,低估本身,其实深刻内心,相当多你自认为很了不起的人,其实也没怎么,真是如此。

  有一点跑偏啊,只是多想了点,对于一些你从未接触到的圈子,以为很漫长,接触了,你会发掘,其实也就这么。

计量成分间隔最上端的惊人:偏移量

  在二维的社会风气里,可以想像成一个二维坐标系。每叁个因素在坐标系内都有五个主导的属性:大小和职位。

来看下代码如何是好到的

scroll

  有的时候候有这种景色:在钦定之处转移和不转变,这种意况只是上边的position:fixed属性就兑现持续了,要结成滚动条滚动事件scroll,使用scroll事件供给小心要整合一些品质和办法。

  • scrollTop(卡塔尔(قطر‎方法的野趣:对象的最最上端到指标在当下窗口显示的界定内的顶边的间隔,能够领略为滚动条从上边伊始滚动的离开。
  • offsetTop属性的意味:当前目的到其上边层最上端的偏离,那些是钦命对象的。
  • offsetHeight属性的乐趣:当前目的的可观值,那些值是不会趁机滚动条变化的。

  关于scroll的局地办法和性质持续这么些,下边几个是大家要用到的,关于任何的大家可以搜下相关解释,我们看下实今世码。

  样式代码和html代码:

亚洲城ca88唯一官方网站 3亚洲城ca88唯一官方网站 4

 1         .canfloat
 2         {
 3             position: fixed;
 4             top: 10px;
 5         }
 6         .newsItem
 7         {
 8             width: 220px;
 9             float: right;
10             padding: 0px 0px 5px;
11             margin-bottom: 2em;
12         }
13         .newsItem .catListTitle
14         {
15             text-align: left;
16             padding: 5px 10px;
17             border: 1px solid #CCC;
18             background: none repeat scroll 0% 0% #F0F0F0;
19         }
20         .catListTitle
21         {
22             font-weight: bold;
23             line-height: 1.5em;
24             font-size: 110%;
25             margin-top: 15px;
26             margin-bottom: 10px;
27             border-bottom: 1px solid #000;
28             text-align: center;
29         }

View Code

亚洲城ca88唯一官方网站 5亚洲城ca88唯一官方网站 6

 1 <div>
 2         <div style="height: 2500px; float: left;">
 3         </div>
 4         <div class="newsItem">
 5             <div style="height: 500px;">
 6             </div>
 7             <div>
 8                 我只是占位的
 9             </div>
10             <div id="floatdiv" class="canfloat">
11                 <h3 class="catListTitle">
12                     公告</h3>
13                 <div id="blog-news">
14                     <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes"
15                         target="_blank">
16                         <img style="vertical-align: bottom; border: 0px" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ92057-6.jpg"
17                             alt="点击这里给我发消息"></a>
18                     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
19                         id="honehoneclock" align="middle" height="70" width="160">
20                         <param name="allowScriptAccess" value="always">
21                         <param name="movie" value="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg">
22                         <param name="quality" value="high">
23                         <param name="bgcolor" value="#ffffff">
24                         <param name="wmode" value="transparent">
25                         <embed wmode="transparent" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg"
26                             quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always"
27                             type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
28                             align="middle" height="70" width="160"></object>
29                     <div id="profile_block">
30                         昵称:<a href="http://home.cnblogs.com/u/xishuai/">田园里的蟋蟀</a><br>
31                         园龄:<a href="http://home.cnblogs.com/u/xishuai/" title="入园时间:2012-08-07">1年6个月</a><br>
32                         粉丝:<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br>
33                         关注:<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow">
34                         </div>
35                     </div>
36                     <script type="text/javascript">                        loadBlogNews();</script>
37                 </div>
38             </div>
39         </div>
40     </div>

View Code

  js代码:

 1         $(function () {
 2             $(window).scroll(function () {
 3                 var ref_min = $("#floatdiv")[0];
 4                 if (!ref_min) return;
 5                 var scroll_top = $(window).scrollTop();
 6                 var ref_height_min = ref_min.offsetTop   $("#floatdiv")[0].offsetHeight;
 7                 if (scroll_top > ref_height_min) {
 8                     $("#floatdiv").addClass("canfloat");
 9                 } else {
10                     $("#floatdiv").removeClass("canfloat");
11                 }
12             });
13         });

  scroll_top获取当前滚动条滚动的相距,ref_height_min是早先调换的相距,大于的话就从头转移,小于的话就不扭转,代码看起来是没什么难点,我们看下运维作效果果:

亚洲城ca88唯一官方网站 7

  上面的功力基本上没什么难点,可是细心看下就能够开掘,浮动框在不应该浮动的地点转移,在该浮动的地点转移,好疑似间隔的剖断现身难点,难点出在哪?就在ref_min.offsetTop那句代码,假设大家实现的是从顶端初始滚动,这段代码是不会身不由己难点的,因为ref_min.offsetTop始终保持一致(倘使设置浮动框和开头浮动宽的离开最上端中度设置类似),假设不从上面开端转移,当开端变化的时候,浮动框间距最上端的值是自然的,大家想要的应当是转换的,全部就能够产出上面的问题。

  大小:

  dom成分在页面包车型大巴深浅有三个属性:offsetWidth 、offsetHeight,

  offsetHeight:成分在笔直方向上的攻陷空间尺寸,以像素计。包蕴成分的惊人、(可以知道的)水平滚动条的可观、上面框高度和底下框中度。(笔者的掌握:盒模型蕴涵border内的万丈总和)

  offsetWidth: (同理)               

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "-transitional.dtd" html xmlns="" xml:lang="zh-CN" lang="zh-CN" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title文字连续滚动/title style *{margin:0px;padding:0px} /style /head body div /div div  div  ul  li1/li li2/li li3/li li4/li li5/li li6/li li7/li li8/li li9/li li10/li li11/li li12/li li13/li li14/li li15/li li16/li li17/li li18/li /ul /div div id='marqueecont2' /div /div script var marquee = document.getElementById('marquee'); var marqueecont = document.getElementById('marqueecont'); var marqueecont2 = document.getElementById('marqueecont2'); MarqTop(marquee,marqueecont,marqueecont2,30); function MarqTop(marquee,marqueecont,marqueecont2,speed){ marqueecont2.innerHTML=marqueecont.innerHTML; // 用这个函数这个滚动连续 // marqueecont.offsetTop 距离顶部的距离 marquee.scrollTop 滚动条滚动的距离 function Marquee(){ if(marqueecont.offsetTop=marquee.scrollTop) { debugger marquee.scrollTop = marquee.scrollTop - marqueecont.offsetHeight; } else{ marquee.scrollTop  ; } } var MyMar=setInterval(Marquee,speed); marquee.onmouseover=function() {clearInterval(MyMar);} marquee.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; } /script /body /html

消弭难题

  解决地点的难点莫过于很简单,正是不要浮动框获取间隔最上部的莫斯中国科学技术大学学,用多少个标记来记录,大家校订一下地方的代码:

  html代码:

亚洲城ca88唯一官方网站 8亚洲城ca88唯一官方网站 9

 1 <div>
 2         <div style="height: 2500px; float: left;">
 3         </div>
 4         <div class="newsItem">
 5             <div style="height: 500px;">
 6             </div>
 7             <div>
 8                 我只是占位的
 9             </div>
10             <div id="sign" title="我只是记录的">
11             </div>
12             <div id="floatdiv" class="canfloat">
13                 <h3 class="catListTitle">
14                     公告</h3>
15                 <div id="blog-news">
16                     <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes"
17                         target="_blank">
18                         <img style="vertical-align: bottom; border: 0px" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ92057-6.jpg"
19                             alt="点击这里给我发消息"></a>
20                     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
21                         id="honehoneclock" align="middle" height="70" width="160">
22                         <param name="allowScriptAccess" value="always">
23                         <param name="movie" value="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg">
24                         <param name="quality" value="high">
25                         <param name="bgcolor" value="#ffffff">
26                         <param name="wmode" value="transparent">
27                         <embed wmode="transparent" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg"
28                             quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always"
29                             type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
30                             align="middle" height="70" width="160"></object>
31                     <div id="profile_block">
32                         昵称:<a href="http://home.cnblogs.com/u/xishuai/">田园里的蟋蟀</a><br>
33                         园龄:<a href="http://home.cnblogs.com/u/xishuai/" title="入园时间:2012-08-07">1年6个月</a><br>
34                         粉丝:<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br>
35                         关注:<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow">
36                         </div>
37                     </div>
38                     <script type="text/javascript">                        loadBlogNews();</script>
39                 </div>
40             </div>
41         </div>
42     </div>

View Code

  js代码:

 1         $(function () {
 2             $(window).scroll(function () {
 3                 var ref_min = $("#sign")[0];
 4                 if (!ref_min) return;
 5                 var scroll_top = $(window).scrollTop();
 6                 var ref_height_min = ref_min.offsetTop   $("#floatdiv")[0].offsetHeight;
 7                 if (scroll_top > ref_height_min) {
 8                     $("#floatdiv").addClass("canfloat");
 9                 } else {
10                     $("#floatdiv").removeClass("canfloat");
11                 }
12             });
13         });

  上边的html只是浮动框上部加了个div标识来记录浮动中度,var ref_min = $("#sign")[0];获取的是符号的扭转中度,并非浮动框的转移中度。那样基本上能够解决地方现身的主题材料,大家看下运营作效果果:

亚洲城ca88唯一官方网站 10

  完整代码:

亚洲城ca88唯一官方网站 11亚洲城ca88唯一官方网站 12

 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     <title></title>
 5     <style type="text/css">
 6         .canfloat
 7         {
 8             position: fixed;
 9             top: 10px;
10         }
11         .newsItem
12         {
13             width: 220px;
14             float: right;
15             padding: 0px 0px 5px;
16             margin-bottom: 2em;
17         }
18         .newsItem .catListTitle
19         {
20             text-align: left;
21             padding: 5px 10px;
22             border: 1px solid #CCC;
23             background: none repeat scroll 0% 0% #F0F0F0;
24         }
25         .catListTitle
26         {
27             font-weight: bold;
28             line-height: 1.5em;
29             font-size: 110%;
30             margin-top: 15px;
31             margin-bottom: 10px;
32             border-bottom: 1px solid #000;
33             text-align: center;
34         }
35     </style>
36     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
37     <script type="text/javascript">
38         $(function () {
39             $(window).scroll(function () {
40                 var ref_min = $("#sign")[0];
41                 if (!ref_min) return;
42                 var scroll_top = $(window).scrollTop();
43                 var ref_height_min = ref_min.offsetTop   $("#floatdiv")[0].offsetHeight;
44                 if (scroll_top > ref_height_min) {
45                     $("#floatdiv").addClass("canfloat");
46                 } else {
47                     $("#floatdiv").removeClass("canfloat");
48                 }
49             });
50         });
51     </script>
52 </head>
53 <body>
54     <div>
55         <div style="height: 2500px; float: left;">
56         </div>
57         <div class="newsItem">
58             <div style="height: 500px;">
59             </div>
60             <div>
61                 我只是占位的
62             </div>
63             <div id="sign" title="我只是记录的">
64             </div>
65             <div id="floatdiv" class="canfloat">
66                 <h3 class="catListTitle">
67                     公告</h3>
68                 <div id="blog-news">
69                     <a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&amp;uin=624541997&amp;site=qq&amp;menu=yes"
70                         target="_blank">
71                         <img style="vertical-align: bottom; border: 0px" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ92057-6.jpg"
72                             alt="点击这里给我发消息"></a>
73                     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
74                         id="honehoneclock" align="middle" height="70" width="160">
75                         <param name="allowScriptAccess" value="always">
76                         <param name="movie" value="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg">
77                         <param name="quality" value="high">
78                         <param name="bgcolor" value="#ffffff">
79                         <param name="wmode" value="transparent">
80                         <embed wmode="transparent" src="http://www.bafengyi.com/uploads/allimg/200313/1GQ94G3-7.jpg"
81                             quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always"
82                             type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
83                             align="middle" height="70" width="160"></object>
84                     <div id="profile_block">
85                         昵称:<a href="http://home.cnblogs.com/u/xishuai/">田园里的蟋蟀</a><br>
86                         园龄:<a href="http://home.cnblogs.com/u/xishuai/" title="入园时间:2012-08-07">1年6个月</a><br>
87                         粉丝:<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br>
88                         关注:<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow">
89                         </div>
90                     </div>
91                     <script type="text/javascript">                        loadBlogNews();</script>
92                 </div>
93             </div>
94         </div>
95     </div>
96 </body>
97 </html>

View Code

  示例下载:scrollTop.rar

 

  位置:

    offsetParent 是一个只读属性,再次回到四个针对近日的(closest,指富含层级上的近年)包涵该因素的确定地点成分。若无定点的因素,则 offsetParent 为近期的 table, table cell 或根成分

  offsetTop:元素相对于其 offsetParent 成分的顶端的相距

  offsetLeft:(同理)

  

              亚洲城ca88唯一官方网站 13

                       元素大小和职分音讯图解

骨干代码offsetTop与scrollTop作比较

  原理:

  计算成分间隔最上部的惊人:将成分的offsetTop与其offsetParent的同样属性相加,如此循环直至根成分,就能够赢得三个主导标准的值。封装如下函数(开箱即用,函数重返值即为成分间隔最上端中度)

 

  function getElementTop (el) {

    var actualTop = el.offsetTop

    var current = el.offsetParent

    while (current !== null) {

      actualTop = current.offsetTop

      current = current.offsetParent

    }

    return actuanlTop

  }

 

看下代码:

  剖判一下代码:

    亚洲城ca88唯一官方网站 14

  总括成分间距左部的莫大:(同理可得)

亚洲城ca88唯一官方网站, 

offsetTop 小于等于 scrollTop时 scrollTop至为0,此次滚动条回到开头地点

要素是还是不是在可视区剖断:结合scrollTop

  借使那样的事务场景:有二个wrap滚动容器,wrap的内容区content的惊人超越wrap的惊人,则产出纵向滚动条。随便拖动滚动条到某些地方,要咬定content里面包车型地铁子成分input输入框是还是不是在可视区内,若不在可视区内,自动拖动滚动条,使其跻身可视区。那样的作业场景其实经常常有遇上。

注: 那么些中scrollTop为负值时,暗中同意至为0

  原理:

  首先,根据上述getElementTop(domInput卡塔尔国函数,获得成分input间距顶端的中度elementTop。再结合滚动容器domWrap的scrollTop属性取得滚动条中度scrollTop(被隐形在剧情区域上方的像素数),进行相比,就可以剖断

  scrollTop > elementTop: 滚动条高度超过成分离最上端中度,表达成分步向了遮掩内容区,步向的量为 scrollTop

  •  elementTop

  scrollTop < elementTop:滚动条中度小于元素的离顶端低度,表达成分还未有进去上方的隐没内容区,如要保证成分在可视区内,则必需同期满意条件,成分不在下方的隐身内容区: elementTop - scrollTop < document.documentElemnt.clientHeight

var marquee = document.getElementById('marquee');var marqueecont = document.getElementById('marqueecont');// offsetTop 小于等于 scrollTop时 scrollTop至为0if(marqueecont.offsetTop=marquee.scrollTop) { marquee.scrollTop = marquee.scrollTop - marqueecont.offsetHeight;} else { marquee.scrollTop  ;}}

  结论:

  所以,成分在可视区的最早剖断条件为:scrollTop < elementTop && elementTop - scrollTop < document.documentElemnt.clientHeight

  以上判定还不太严格,假设wrap还同期存在横向滚动条,还得再决断是或不是成分在横向的可视区内,倘若要咬定元素是或不是完全在可视区,还得抬高自身的可观值,即为:scrollTop < elementTop && elementTop input.offsetHeight - scrollTop < document.documentElemnt.clientHeight。

  通过安装scrollTop属性的值domWrap.scrollTop = elementTop 能够让滚动条自动滚动,且input元素正好在可视区的上边。

 

  ps:书上是这么说的,对于简易的CSS布局的页面,getElementTop函数能够获得丰裕纯粹的结果。对于利用表格和内嵌框架布局的页面,由于分裂浏览器完结这么些要素的主意各异,因而获得的结果就不太标准。在自个儿的作业中,笔者从没选取表格和内嵌框架的布局,总结结果实乃规范的,可放心使用。借使选取表格和内嵌框架构造的页面,Keeping a eye on it。

 

参照他事他说加以考查文献: Javascript高档程序设计(第三版)  MDN web docs

Q&A:有毛病和指正的地点款待在商酌区留言

 

再看下图越来越直观些

offsetHeight

offsetHeight为滚动内容其实的莫斯中国科学技术大学学,如图

故此marquee.scrollTop - marqueecont.offsetHeight为负数,scrollTop为负值时,暗中同意会至为0至此三番五次滚动的文字就那样实现了,上边呈现滚动条是为了演示属性overflow: hidden;改为了overlay呈现垂直滚动条

小结延续滚动文字,主如若基于offsetTop和scrollTop举行比对滚动内容移动到最上端也是滚动条的滚动高度,那时候造成贰回巡回结合停车计时器周期的实施,完毕接二连三的轮转效应scrollTop为负值时,暗中同意至为0专门的工作中主要遇到的标题是,第2个div未给赋值,招致是空白上移到最上部才步入下一个循环,以致看上去不总是的情景

经过地点的牵线,希望给你有个别建设性的参照,有其它难点应接打扰,参加【前端突击】,长按二维码关心,或Wechat找出前端突击 一齐探讨前端的边际

款待关切,【前端突击】猎鹰突击,无畏风雨,期望您的参加...

作者:dragonking链接:来源:掘金

编辑:亚洲城ca88唯一官方网站 本文来源:亚洲城ca88唯一官方网站js总计成分间距顶上部分

关键词: 亚洲城ca88