公告:由于博客https升级,原博客引用http链接失效,预览及部分图片效果请查看源代码!

css中的visibility和position新属性sticky

前言

今天介绍的css的visibility和position新属性sticky,之前的文章中并没有提及。关于css文章,前面写了不少。但是这2个的介绍真没有,今天简单介绍一下,就当是补充和积累了吧。

visibility

关于visibility,我们平时用的蛮多,大家知道的是,他和display:none的区别。visibility:hidden是占空间的,渲染的时候会渲染,但是display:none是不占空间的,具体渲染和加载,请看我之前的文章:https://www.haorooms.com/post/web_http_request

但是:把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

关于css中的那些scroll

一、滚动轴scrollbar

说到css中的scroll,我们最先想到的应该是overflow:scroll。想到这个scroll之后,自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴,mac和window显示各异,不同浏览器也显示不同。早起也有一些js的解决方案。例如:jScrollPanetinyscrollbar等等。后来,谷歌浏览器支持滚动轴的修改,我之前也有文章:https://www.haorooms.com/post/CSS_selections

控制滚动轴的7个伪元素分别是:

::-webkit-scrollbar:整个滚动条
::-webkit-scrollbar-button:滚动条上的按钮(下下箭头)
::-webkit-scrollbar-thumb:滚动条上的滚动滑块
::-webkit-scrollbar-track:滚动条轨道
::-webkit-scrollbar-track-piece:滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner:当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer:某些元素的交汇部分的部分样式(类似textarea的可拖动按钮)

Page Visibility API及Page Lifecycle API的介绍及应用

前言

今天主要介绍2个api,一个是Page Visibility API,一个是Page Lifecycle API,这两个api你可能用的不多,关于Page Visibility API,目前大部分主流浏览器已经支持。

Page Visibility API主要是监听网页是否隐藏,是否可见。Page Lifecycle API可以让我们对整个网页的生命周期有了更好的把控能力。

Page Visibility API

首先,我介绍一下Page Visibility API的应用场景

用户对我们的h5页面进行如下操作

1、用户点击了一条系统通知,切换到另一个 App。

2、用户进入任务切换窗口,切换到另一个 App。

3、用户点击了 Home 按钮,切换回主屏幕。

4、操作系统自动切换到另一个 App(比如,收到一个电话)

rollup打包js的注意点

前言

rollup比较适合打包js的sdk或者封装的框架等,例如,vue源码就是rollup打包的。webpack比较适合打包一些应用,例如SPA或者同构项目等等。最近我们对rollup小试牛刀了一下。简单分享一些注意事项吧。

rollup基础

rollup基础知识及插件的一些使用,网上有不少资料,可以去查阅。

blob对象介绍及相关应用

前言

后面有时间总结一下react相关知识和性能优化的东西,这些东西总结起来要花些时间。一直没有时间总结。今天的这个问题也是项目中用到的,之前没有写过,写在博客中,有需要的自取。主要是js流文件blob介绍及相关应用。

Blob对象

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。

opt:对象,用于设置Blob对象的属性(如:MIME类型)