关于前端:cssjs小案例

45次阅读

共计 1388 个字符,预计需要花费 4 分钟才能阅读完成。

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

图一底部被导航条遮挡了,心愿能兼容 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));

二、网页加载起源:

(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';}

四、margin-top 为正数,img 图片遮挡 div 背景的问题

正文完
 0