js运动（二）—— 右侧悬浮框

程序开发 2023-09-09 10:57:51

右侧悬浮框，其视觉效果为：即使滚动条滚动，悬浮框也依然在可视范围内。可以理解为悬浮框跟随滚动条运动。

这个例子看似基础，其实里面集成了很多的知识点，详见下文。

1. 文档坐标和视口坐标

元素的位置是以像素来度量的，向右代表X坐标的增加，向下代表Y坐标的增加。但是，有有个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角后者相对于在其中显示文档的视口的左上角。在顶级窗口和标签页中，“视口”只是实际上显示文档内容的浏览器的一部分；它不包括浏览器的“外壳”（如菜单、工具条和标签页）。针对框架页中显示的文档，视口是定义了框架页的 </code> 元素。无论在何何种情况下，当讨论元素的位置时，必须弄清楚使用的坐标是文档坐标还是视口坐标（注意，视口坐标有时也叫做窗口坐标）</p> <p>如果文档比视口要小，或者说它还未出现滚动，则文档的左上角就是视口的左上角，文档和视口坐标系统是同一个。但是，一般来说，要在两种坐标系之间互相转换，必须加上或减去滚动的偏移量（scroll offset）。例如，在文档坐标中如果一个元素的Y坐标是200像素，并且用户已经把浏览器向下滚动了75像素，那么视口坐标中元素的Y坐标就是125像素<sup>[注释1]</sup>。同样，在视口坐标中如果一个元素的X坐标是400像素，并且用户已经水平滚动了视口200像素，那么文档坐标中像素的X坐标中元素的X坐标就是600像素<sup>[注释2]</sup>。</p> <p>文档坐标比视口坐标更加基础，并且在用户滚动时他们不会发生变化<sup>[注释3]</sup>。不过，在客户端编程中使用视口坐标是非常常见的。当使用CSS指定元素的位置时运用了文档坐标。</p> <p>为了在坐标系中转换，我们需要判定浏览器窗口的滚动条的位置。Window 对象的 <code>pageXoffset</code> 和 <code>pageYOffset</code> 属性在所有的浏览器中提供这些值，除了 IE8 及更早的版本以外。IE（和所有现代浏览器）也可以通过 <code>scrollLeft</code> 和 <code>scrollTop</code> 属性来获得滚动条的位置。令人迷惑的是，正常情况下通过查找文档的根节点（<code>document.documentElement</code>）来获取这些属性，但是在怪异模式下，必须在文档的<code><body></code>元素（<code>documeng.body</code>）上查询它们。</p> <hr /> <p>以上字段摘自《JavaScript权威指南》(P390)，个人理解如下。</p> <p>注释1：<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20190506142641793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 注释2：<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20190506142653839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /><br /> 注释3：元素会随着文档一起移动。当向下滚动时，元素与文档一起上移；当水平滚动时，元素与文档一起左移，所以其文档坐标并不会改变。</p> <p>在滚动动作中，动的都是文档（元素随动），视口不会动。所以当定义为视口坐标并伴随滚动时，元素的视口坐标不会改变，而文档坐标会改变；当定义为文档坐标并伴随滚动时，元素的文档坐标不会改变，但视口坐标会改变。</p> <h2>2.关于元素尺寸、位置和溢出的一些信息</h2> <h3>2.1 offsetHeight 和 offsetWidth</h3> <p>《JavaScript权威指南》（P393-396）中是这么描述的：任何HTML元素的只读属性offsetWidth 和 offsetHeight 以 css 像素返回它的屏幕尺寸，返回的尺寸包含元素的边框和内边框，除去了外边框。<br /> 则如下图。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20190506155321226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> <h3>2.2 clientHeight 和 clientWidth</h3> <p>《JavaScript权威指南》中是这么描述的：clientWidth 和 clientHeight 类似 offsetWidth 和 offsetHeight ，不同的是它们不包含边框大小，只包含内容和它的内边距。同时，如果浏览器在内边距和边框之间添加了滚动条，clientWidth 和 clientHeight 在其返回值中也不包含滚动条。注意，对于类似<code><i> 、<code>、<code>、<span></code>这些内联元素，clientWidth 和 clientHeight总是返回0。<br /> 则如下图。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20190506160221605.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> <h3>2.3 scrollWidth 和 scrollHeight</h3> <p>《JavaScript权威指南》中是这么描述的：scrollWidth 和 scrollHeight是元素的内容区域加上它的内边距再加上任何溢出的尺寸。当内容刚好和内容区域匹配而没有溢出时，这些属性与 clientHeight 和 clientWidth 是相等的。但当溢出时，它们就包含溢出的内容，返回值比 clientHeight 和 clientWidth 要大。</p> <p>则如下图。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/2019050616121279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> <h3>2.4 scrollTop</h3> <p>scrollTop指定元素滚动条的位置，这个属性是可写的。<br /> <img referrerpolicy="no-referrer" src="https://img-blog.csdnimg.cn/20190506161509924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxMzA1OTY1,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" /></p> <h3>2.5 offsetLeft 和 offsetTop</h3> <p>所有元素拥有offsetLeft 和 offsetTop属性来返回元素的 X 和 Y 坐标。对于很多元素，这些值是文档坐标，并直接指定元素的位置。但对于已定位元素的后代元素和一些其他元素（如表格单元），这些属性返回的坐标是相对于祖先元素而非文档。</p> <h2>3. 右侧悬浮框</h2> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>rightFloatingFrame</title> <style> #div1 {width:100px; height:150px; background-color:red; position:absolute; right:0; bottom:0;} </style><script> window.onscroll = function(){var oDiv = document.getElementById("div1");var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;oDiv.style.top = clientHeight + scrollTop - oDiv.offsetHeight + "px"; } </script></head><body style="height:2000px;"> <div id="div1"> </div> </body> </html> </code></pre> <p>代码解读：<br /> <code><body style="height:2000px;"></code>给文档设置一个高度，使得文档可以出现滚动条。注意，是设置 style 属性而不是直接设置height属性。</p> <p><code>var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;</code> 在第一节讲过，需要兼容标准模式和怪异模式。</p> <p><code>var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;</code>这句在原教程中没有，原教程中直接使用<code>document.documentElement.clientHeight</code>，而没有像scrollTop一样做兼容处理，是遗忘还是故意呢？</p> <p><code>oDiv.style.top = clientHeight + scrollTop - oDiv.offsetHeight + "px";</code>因为元素本身绝对定位在bottom为0的地方，使用可视区高度加上溢出高度减掉元素本身的高，就得到元素顶部的坐标。注意不要忘了单位。</p> <p>简单的代码确实能够做到悬浮的效果，但在滚动条滚动时，悬浮框存在抖动现象。比较可行的解决办法是，让元素缓慢运动到位置而不是直接到位。</p> <p>这就要用到 js运动（一）— sidebar(分享到)中缓动一节提到的 moveTo 函数了，将 <code>clientHeight + scrollTop - oDiv.offsetHeight</code> 当成iTarget传入函数即可。</p> <p>扩展：当需要把悬浮框停留在中间而非右下角时，元素的 top 属性的目标值变成 <code>parseInt(clientHeight - oDiv.offsetHeight ) / 2 + scrollTop ）;</code>元素位于中间，则可视区高度减掉元素自身的高度的一半即为元素到上边框或者到下边框的距离，加上溢出部分，即可得到元素的top属性目标值。当然，由于计算可能出现小数，所以使用了parseInt函数将目标取整。</p> <h2>4. 总结</h2> <p>右侧悬浮框的实现整体并不复杂，但本文最大的要点还是在第一节和第二节的知识点上，同时，也相当于复习了一遍缓动的相关知识。</p> <h2>参考文献</h2> <p>【1】《JavaScript权威指南》<br /> 【2】智能社：JavaScript教程——从入门到精通（ https://ke.qq.com/course/152997?taid=766917950461349 ）<br /> 【3】js运动（一）—— sidebar(分享到)（ https://blog.csdn.net/qq_31305965/article/details/89676391 ）</p> </div> <br> <p id="tag-wrap" class="tag-wrap"> <i class="fa fa-tags"></i> 标签：</p> <div class="nextlog"> 上一篇： <a href="/it-v1f02q7ri9.html">react-native结合Genymotionshell开发(二)</a> 下一篇： </div> <div class="link-box"> <p class="title">相关文章</p> <ul class="loglist"> 无相关信息 </ul> </div> </div> </div> </div> <div id="sidebar"> <section id="aside_hot" class="widget widget_aside_hot sb br mb"> <h3><span>热门文章</span></h3> <ul class="widget-content aside_hot"> <li class="clearfix"><span class="list list-1">1</span><a href="/it-z1n0z28zf0.html" title="">js运动（二）—— 右侧悬浮框</a></li> <li class="clearfix"><span class="list list-2">2</span><a href="/it-v1f02q7ri9.html" title="">react-native结合Genymotionshell开发(二)</a></li> <li class="clearfix"><span class="list list-3">3</span><a href="/it-qud10du278.html" title="">五、ROS的常用命令</a></li> <li class="clearfix"><span class="list list-4">4</span><a href="/it-k1s0j2aa74.html" title="">Vue 报错之 Syntax Error TypeError this.getOptions is not a function</a></li> <li class="clearfix"><span class="list list-5">5</span><a href="/it-1ee02znw73.html" title="">三、在Canvas中使用WebGL</a></li> <li class="clearfix"><span class="list list-6">6</span><a href="/it-1k0oh2o7k2.html" title="">26天学通前端开发（配资料）</a></li> <li class="clearfix"><span class="list list-7">7</span><a href="/it-es1c0us270.html" title="">vue3 ts响应式数组dom渲染其数据</a></li> <li class="clearfix"><span class="list list-8">8</span><a href="/it-1hr02hy6h6.html" title="">如何动态增加php模块,动态编译添加php模块</a></li> </ul> </section> <section id="aside_new" class="widget widget_aside_new sb br mb"> <h3><span>最新文章</span></h3> <ul class="widget-content aside_new"> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-d5b0yyg80.html" title="Angular入门-语法支持">Angular入门-语法支持</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-y50yi8ij4.html" title="ElementUI之侧边导航栏样式修改">ElementUI之侧边导航栏样式修改</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-5kq0uq8u6.html" title="angular的目录">angular的目录</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-t50je8aj8.html" title="ionic Mac下打包APP出现的错误">ionic Mac下打包APP出现的错误</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-5d0dw8vv9.html" title="分享 typescript 教程">分享 typescript 教程</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-x50oo9xo3.html" title="ngOnChanges 和 ngDoCheck 的异同">ngOnChanges 和 ngDoCheck 的异同</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-zb5sz0s95.html" title="vue合并数组">vue合并数组</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-ui5ri09i6.html" title="Vue的钩子函数的叫法原因">Vue的钩子函数的叫法原因</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-uuu51kf01.html" title="推荐 | Vue 入门进阶路线">推荐 | Vue 入门进阶路线</a></li> <li class="clearfix"><i class="fa fa-caret-right"></i><a href="/it-m5mg1z0t2.html" title="ubuntu20安装配置nginx，部署angular到nginx">ubuntu20安装配置nginx，部署angular到nginx</a></li> </ul> </section> <section id="divTags" class="widget widget_tags sb br mb"> <h3><span>标签列表</span></h3> <div class="widget-content divTags"> <div class="d_tags"> </div> </div> </section> </div> </div> </div> <div id="footerbar"> <div class="wrap"> <span><a href="">素材巴巴</a> Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved.</span> <span>备案号：备案中。</a></span> </div> </div> <div id="backtop"><span class="fa fa-chevron-circle-up"></span></div> <script src="/skin/sucaibaba/js/common.js" type="text/javascript"></script> <script src="/skin/sucaibaba/js/scrolltxt.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#croll").textSlider({ line: 1, speed: 1000, timer: 3000 }); }) </script> </body> </html>