前言

开工大吉，祝大家2019诸事顺利！ 当我们用微信或者浏览器打开一个html5页面的时候，有时候会有浮层，提示要不要打开相关APP，当然也有的会自动唤醒到app中。这种唤醒是如何做到的呢？

今天简单的写下浏览器是如何唤醒APP的。当然，关于唤醒，涉及的东西蛮多，例如地址加参数唤醒，设置唤醒白名单，唤醒黑名单等等。h5地址和Scheme地址的转换等等。本文简单写下唤醒的相关原理。

如下图：

前言

新年第一篇文章，记录一下我前段时间封装的一个vue组件吧。技术需要积累，有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。

div框选实现

div框选效果，其实没有什么好的方法，就是获取鼠标事件，根据鼠标的位置，动态创建一个跟随鼠标的div。【注：这种方式需要依赖position的定位方式，一般鼠标事件位置是针对全局的，所以鼠标框选的div 位置的position最好父级元素是根元素的定位。不然，鼠标框选区域和被框选区域很难保持一致。】

前言

今天介绍的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的元素里面，会发生什么？

一、滚动轴scrollbar

说到css中的scroll，我们最先想到的应该是overflow:scroll。想到这个scroll之后，自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴，mac和window显示各异，不同浏览器也显示不同。早起也有一些js的解决方案。例如：jScrollPane、tinyscrollbar等等。后来，谷歌浏览器支持滚动轴的修改，我之前也有文章：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的可拖动按钮）