css/js小案例

一、ios底部导航条遮挡问题
image.png
image.png

图一底部被导航条遮挡了,希望能兼容ios展示为图二的效果,留出底部安全距离。

  1. margin-bottom / padding-bottom:
margin-bottom: constant(safe-area-inset-bottom); /* 兼容 IOS < 11.2 */
margin-bottom: env(safe-area-inset-bottom); /* 兼容 IOS > 11.2 */

padding-bottom: constant(safe-area-inset-bottom); 
padding-bottom: env(safe-area-inset-bottom); 

  1. 本身有padding值,把padding-bottom一起计算进去(margin一样):
padding-bottom: calc(15px + constant(safe-area-inset-bottom));
padding-bottom: calc(15px + env(safe-area-inset-bottom));

3. 用高度加出来安全区域:

height: calc(80px + constant(safe-area-inset-bottom));
height: calc(80px + env(safe-area-inset-bottom));

二、margin-top为负数,img图片遮挡div背景的问题
image.png
image.png

当前一个元素是图片,后面的元素设置margin-top为负数,想要得到图一的效果,实际渲染出来是图二的效果,第二个元素的背景被图片挡住了。

针对这个问题,可以给第二个元素设置 position: relative; 即可解决。

三、网页加载来源:

(1)performance.navigation.type(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况):
   0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATE。
   1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
   2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
   255:任何其他来源的加载,相当于常数performance.navigation.TYPE_RESERVED。
(2)performance.navigation.redirectCount:表示网页经过重定向的次数。

开发中,可以利用以上属性来处理一些逻辑,比如判断performance.navigation.type为2时,取缓存数据或做锚点定位等操作。

四、取消页面再次加载后的滚动位置

浏览web页面时,当浏览到某一片段时,刷新页面或去了别的页面再返回 ,浏览器会默认恢复滚动到上次浏览的位置,当然这也是最佳体验设计。有些情况下,不想让浏览器定位到上次访问的位置,该如何处理?

可使用scrollRestoration属性值:

auto 默认值:将恢复用户已滚动到的页面上的位置。
manual 未还原页面上的滚动位置。必须手动滚动到该位置(防止自动恢复页面位置)。

所以只需要执行history.scrollRestoration属性值为manual即可取消上次记录的滚动位置。

if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
}
4 声望
0 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图
4 声望
0 粉丝
宣传栏