html修复锚点位置偏移

 在使用 html锚点 时候一到那我们设置了 头部导航栏固定 ,就会出现 html锚点跳转 时候 位置偏移 , 锚点定位不准确 等问题,特别影响用户体验。 可以看到以上效果图 头部浮动 已经导致 锚点位置向上偏移 了,然后我们可以通过以下 任意两种方法 去 修复锚点 位置偏移 的问题。使用 css 的 target 选择器修复锚点位置偏移.article-deviation:target{ padding-top: 110px !important; /*或者*/ margin-top: 110px !important; } 我们通过使用 target 选择器修复锚点位置偏移,其中使用 padding 还是 margin 以及 像素大小 可以根据 具体需求进行调整 。target 完整使用示例

这...

前端,解决方案 2021-09-27 AM 3118次 0条

html使用css实现锚点平滑滚动

 本文将通过使用css 优化锚点 平滑滚动,默认我们在使用 html锚点 的时候,点击锚点链接默认是 立即跳转 到指定位置。默认html锚点效果 我们可以看到默认的 html锚点 效果是 非常僵硬 的,用户体验 非常不好,下面我们就通过css去 优化锚点 使其 平滑滚动。css滚动行为属性 scroll-behavior 我们可以通过css的 滚动行为 属性 scroll-behavior 来 快速优化用户体验 使其默认 锚点平滑滚动。属性 scroll-behavior 官方解释当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚动,不受这个属性的影响。在根元素中指定这个属性时,它反而适用于视窗。 大致意思就是当触发滚动操作时候可以通过 scroll-behavior 属性控制其行为。使用 scroll-behavior 属性优化锚点 我们只需要在 html样式 里面加入一下代码即可实现,设置smooth 就可以平滑滚动了。html{ ...

前端,解决方案 2021-09-26 PM 2745次 0条

强制刷新jsdelivr缓存

 众所周知 jsdelivr 是一个免费好用的开源CDN,可以帮助我们加速一些静态资源如js,css,img等使用 jsdelivr 可以大大降低我们的资源成本,并能加速资源访问,节约服务器开销。刷新 jsdelivr 静态资源缓存 我们只需要把相关链接地址cdn替换为purge即可强制实时刷新 jsdelivr 缓存https://cdn.jsdelivr.net/替换为https://purge.jsdelivr.net/测试强制刷新 jsdelivr 缓存 测试 jsdelivr 链接地址,页面返回 json 中状态 status 为 finished 即为刷新缓存成功// https://purge.jsdelivr.net/gh/laiwi/Attachment@latest/usr/uploads/2021/08/2865017580.png { "id": "7OXQGbeywo6xlpyR", "status": "finished", "timestamp": "2021-09-08T14:04:54.338Z", "paths": { ...

前端,解决方案,其他 2021-09-09 PM 2706次 0条

一文搞懂前端service-worker 技术

老马首次接触Service Worker还是在使用 jsproxy 开源项目中开始以为是一种新技术普及少应用更少随着使用的过程中,不断的发现其实国内外的一些大型购物,技术性,社交网站包过一些混合APP等等已经再使用 Service Worker 这项技术了本文将一步异步全面详细的讲述 Service Worker 技术的应用实操什么是Service Worker服务器与浏览器之间的中间人,如果网站中注册了Service Worker那么它可以拦截当前网站所有的请求,进行判断(需要编写相应的判断程序),如果需要向服务器发起请求的就转给服务器,如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在Service Worker 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作,其中最重要且广泛的的作用就是离线资源缓存。特性基于web worker(JavaScript主线程的独立线程,如果执行消耗大量资源的操作也不会堵塞主线程)在web worker的基础上增加了离线缓存的能力本质上充当Web应用程序(服务器)与浏览器之间的代理服务器创建有效的离线体验(将一些...

前端,其他 2021-09-06 AM 11536次 0条