首页 > 前端

通过 JavaScript 脚本解决移动端弹出层滚动穿透的问题

前端开发中经常会遇到一个麻烦的问题:在通过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...

使用 Vue.js 2.0 构建 Chrome 插件

最近没事做 Chrome 插件时,突发奇想,觉得可以用 Vue 来构建,于是折腾了两天完成,随手总结下。 尝试与思考过程 由于手头有一个现成的脚手架,于是在产生这个想法后,我立刻将自己的 Vue 脚手架拉到插件目录中,企图直接使用。编译本地运行,似乎一点问题也没有,然而当我配置好插件信息加载到 Chrome 中时,发现页面一片空白,一时不知原因为何。 接下来我在查了一些资料后得知 Chrome 插件环境下的 内容安全策略(CSP) 为了安全会禁止某些函数的执行,于是Vue.js中的模板渲染会遇到问题。接着我回到Vue.js的文档中查找解决方法,找到了关于CSP环境下的说明。 Some ...

CSS父元素设置最小高度 子元素设置百分比高度不生效的问题

今天写一个页面时,发现一个有趣的事情,我试图让一个遮罩层高度为100%,结果一直不生效,情况如下: <body style="height: 100%;"> <div style="min-height: 100%;"> <div style="height: 100% width:100%;"></div> </div> </body> 如上方示例代码,外部是主容器,内部是一个遮罩层。 父层设置了百分比min-height,同时没有设置height。 子层height设置为100%。 按照思路,...

最新文章

最近回复