- 2019/03/21
- |
- 技术随笔
- |
- 0 Replies
前端开发中经常会遇到一个麻烦的问题：在通过fixed或者absolute定位的弹出层上进行滚动操作的时候，滚动事件会穿透到底部导致body跟着滚动，及其影响交互体验。常规做法是在弹出层时候禁止body的滚动，将其设置为overflow: hidden，但是会导致滚动高度丢失从而造成视觉上一次弹动，所以我决定从弹出层本身考虑这个问题。
<body>
Body content.
<div id="popup" style="position: fixed; top: 0; right: 0; left: 0; bottom: 0">
Popup lay...
- 2017/09/08
- |
- 技术随笔
- |
- 0 Replies
<div class="fill"></div>
.fill {
overflow: hidden;
background-size: cover;
background-position: center;
background-image: url('path/to/image.jpg');
}
- 2017/09/07
- |
- 技术随笔
- |
- 0 Replies
最近没事做 Chrome 插件时，突发奇想，觉得可以用 Vue 来构建，于是折腾了两天完成，随手总结下。
尝试与思考过程
由于手头有一个现成的脚手架，于是在产生这个想法后，我立刻将自己的 Vue 脚手架拉到插件目录中，企图直接使用。编译本地运行，似乎一点问题也没有，然而当我配置好插件信息加载到 Chrome 中时，发现页面一片空白，一时不知原因为何。
接下来我在查了一些资料后得知 Chrome 插件环境下的 内容安全策略(CSP) 为了安全会禁止某些函数的执行，于是Vue.js中的模板渲染会遇到问题。接着我回到Vue.js的文档中查找解决方法，找到了关于CSP环境下的说明。
Some ...
- 2017/09/05
- |
- 技术随笔
- |
- 0 Replies
今天写一个页面时，发现一个有趣的事情，我试图让一个遮罩层高度为100%，结果一直不生效，情况如下：
<body style="height: 100%;">
<div style="min-height: 100%;">
<div style="height: 100% width:100%;"></div>
</div>
</body>
如上方示例代码，外部是主容器，内部是一个遮罩层。
父层设置了百分比min-height，同时没有设置height。
子层height设置为100%。
按照思路，...