绝世唐门三哥的博客，多多关注，会不定期产出高质量文章和大家共享！

摘要：本文介绍了使用IntersectionObserver API实现底部按钮动态固定的方法。通过监听观察元素的可见性，当内容超出一屏时自动固定底部按钮，提升用户体验。文章包含完整的Vue3实现代码，详细讲解了IntersectionObserver的工作原理、参数配置和性能优化建议，并提供了移动端适配、旧浏览器兼容等注意事项。

IntersectionObserver是浏览器提供的原生API，用于高效检测元素与视口的交叉状态。它通过异步回调机制实现懒加载、滚动动画触发、底部加载等功能，相比传统scroll监听具有性能优势。使用步骤包括创建观察器、绑定目标元素和适时销毁观察器。支持配置根元素、边界边距和可见阈值，但不兼容IE。该API避免了手动计算元素位置，大幅降低了开发成本，是现代Web开发中元素可见性检测的首选方案。

iOS网页禁用弹性滚动方案：1.CSS方法可全局禁用（html/body设置overflow:hidden和touch-action:none）或局部控制（单独容器开启滚动）；2.JS方法监听touchmove事件阻止默认滚动行为。注意会降低用户体验，建议仅在全屏应用等特殊场景使用，并注意iOS版本兼容性差异。局部滚动区域需单独处理，保持正常交互功能。

我们在前期开发时，一般使用chrome或者edge浏览器，会使用vue-devtools或react-devtools（此插件个人未使用，可百度下是否可内嵌入项目！）来审查vue项目；这个需要安转浏览器插件才可支持！故此本博客的目的是，如果已经开发或者维护阶段的vue+vite项目如何临时插入该插件使用!创建vue3项目时，会提示是否安装devtools的插件！

提前加载iframe的内容，可以通过设置iframe元素的src属性为一个空白页面或一个预加载页面，当需要显示iframe时再修改src属性为真正需要加载的页面。将iframe的内容分成多个片段，可以将每个片段作为独立的iframe加载，这样即使其中一个片段加载慢或发生错误，不会影响其他片段的加载。中的内容在父页面的其他内容之前下载完成，这将导致父页面的其他内容被延迟显示，从而阻塞页面的加载。的内容同时加载可能会对用户的设备产生显著的性能影响，从而阻塞页面的加载。的内容完全加载，父页面的渲染才能继续。

有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。2. 同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。1. 需要将viewport设置为cover，env和constant才能生效。这里不一定用padding-bottom可以是margin-bottom设置，具体看实际情况！采用viewport+env+constant方案。

IntersectionObserver API

最近有同学在面试的时候被问到了这个问题。所以我们利用这篇文章对这个问题进行下解答。

decodeURIComponent(ody中的参数，即可转义为正)2.post请求修改body里面的参数，可能需要适当的转换。这里修改参数是分两种情况get请求和post请求。4.控制台获取Elements面板选中的元素。1.get请求直接修改url上的拼接参数。10.$i直接在控制台安装npm包。3.复制JavaScript变量。7.控制台引用上一次执行的结果。9."$"和"$$"选择器。2.在控制台快速发起请求。5.截取一张全屏的网页。1.一键重新发起请求。.....................

2. 对于防抖和节流函数的详细的使用封装函数：对于防抖函数的详细封装以及简化版:对于节流函数的详细封装以及简化版:

==让加载更快==1. 压缩代码，减小体积。使加载更快。2. 减少请求次数：合并请求，ssr服务端渲染，缓存3. 将静态文件采用CDN方式引入==缓存==1. 静态资源加hash后缀，根据文件内容计算hash2. 文件内容不变，则hash不变，则url不变3. url和文件不变，则会自动触发http缓存机制，返回304==SSR(服务端渲染)==1. 服务端渲染：将网页和数据一起加载一起渲染2. 非SSR(前后端分离)：先加载网页，在加载数据并渲染数据3. 早先的JSP/.